import type { FC } from 'react';
import React from 'react';
import { Alert } from '@theorchard/suite-components';

export interface Props {
    contextType: 'account' | 'subaccount' | 'bulkSession';
    note: string;
}

export const CLASS_NAME = 'ReviewContextAlert';
export const INTL_PREFIX = 'contentReview.reviewContextAlert';

const ReviewContextAlert: FC<Props> = ({ contextType, note }) => {
    return (
        <Alert
            testId={CLASS_NAME}
            className={CLASS_NAME}
            variant="information"
            text={
                <div className={`${CLASS_NAME}-text`}>
                    <div
                        data-testid={`${contextType}-contextAlertTitle`}
                        className="title"
                    >
                        {$t(`${INTL_PREFIX}.${contextType}Header`)} |{' '}
                        {$t(`${INTL_PREFIX}.reviewContext`)}
                    </div>
                    <div data-testid="contextAlertBody" className="body">
                        {note}
                    </div>
                </div>
            }
        />
    );
};

export default ReviewContextAlert;