import { FC } from 'react';
import { observer } from 'mobx-react';

import { EmailPreview } from './email-preview';
import type { DoubleOptInPropsFormState } from '../double-opt-in';

interface OptInEmailPreviewProps extends DoubleOptInPropsFormState {
    open: boolean;
    footerText: string;
    onClose(): void;
}

export const OptInEmailPreview: FC<OptInEmailPreviewProps> = observer(
    ({ open, footerText, onClose, emailHeader, emailBody, emailButtonText }) => {
        if (!open) {
            return null;
        }

        return (
            <EmailPreview
                title="Double Opt-In Email Preview"
                onClose={onClose}
                header={emailHeader.value}
                body={emailBody.value}
                buttonText={emailButtonText.value}
                footer={footerText}
            />
        );
    },
);