import React from 'react';
import { Alert } from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import './index.scss';

export const ColumnErrorAlert = ({
    templateDownloadLink,
    classicalTemplateDownloadLink,
}: {
    templateDownloadLink: string | null;
    classicalTemplateDownloadLink: string | null;
}) => {
    return (
        <Alert
            className="column-error-alert"
            variant="error"
            text={
                <div>
                    <div>
                        {$t('bulkDigitalAudio.columnErrorAlert.alertText')}
                    </div>
                    {templateDownloadLink && classicalTemplateDownloadLink && (
                        <div>
                            <ul className="column-error-alert-template-links">
                                <li>
                                    {formatJsxMessage(
                                        'bulkDigitalAudio.columnErrorAlert.nonClassicalTemplateLinkText',
                                        {
                                            link: ({ children }) => (
                                                <a href={templateDownloadLink}>
                                                    {children}
                                                </a>
                                            ),
                                        }
                                    )}
                                </li>
                                <li>
                                    {formatJsxMessage(
                                        'bulkDigitalAudio.columnErrorAlert.classicalTemplateLinkText',
                                        {
                                            link: ({ children }) => (
                                                <a
                                                    href={
                                                        classicalTemplateDownloadLink
                                                    }
                                                >
                                                    {children}
                                                </a>
                                            ),
                                        }
                                    )}
                                </li>
                            </ul>
                        </div>
                    )}
                </div>
            }
        />
    );
};

export default ColumnErrorAlert;