import { FC } from 'react';
import classnames from 'classnames';

import { Modal, ModalProps } from '@servicetitan/design-system';

import * as Styles from './email-preview.module.less';

interface EmailPreviewProps {
    title: string;
    header?: string;
    body?: string;
    buttonText?: string;
    footer?: string;
    onClose: ModalProps['onClose'];
}

export const EmailPreview: FC<EmailPreviewProps> = ({
    title,
    header,
    body,
    buttonText,
    footer,
    onClose,
}) => {
    const isCardEmpty = !header && !body && !buttonText;

    return (
        <Modal
            open
            size={Modal.Sizes.M}
            closable
            title={title}
            onClose={onClose}
            className="qa-email-preview"
        >
            <div className={Styles.preview}>
                {!isCardEmpty && (
                    <div className={Styles.card}>
                        {header && (
                            <h1 className={classnames(Styles.title, 'qa-email-preview-header')}>
                                {header}
                            </h1>
                        )}
                        {body && (
                            <p className={classnames(Styles.text, 'qa-email-preview-body-copy')}>
                                {body}
                            </p>
                        )}
                        {buttonText && (
                            <a
                                className={classnames(
                                    Styles.button,
                                    'qa-email-preview-button-text',
                                )}
                            >
                                {buttonText}
                            </a>
                        )}
                        {footer && (
                            <p className={classnames(Styles.footer, 'qa-email-preview-footer')}>
                                {footer}
                            </p>
                        )}
                    </div>
                )}
            </div>
        </Modal>
    );
};