import Alert from '@material-hu/components/design-system/Alert';

import { CertificateType } from 'src/pages/dashboard/Learning/Settings/Certificates/constants';
import { type LearningCertificateType } from 'src/pages/dashboard/Learning/Settings/Certificates/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CertificateTemplateAlertProps = {
  type: LearningCertificateType;
};

const CertificateTemplateAlert = ({ type }: CertificateTemplateAlertProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Alert
      severity="highlight"
      title={t('settings.certificates.create_flow.info_alert')}
      description={
        type === CertificateType.CUSTOM_BACKGROUND
          ? t('settings.certificates.create_flow.info_alert_description')
          : undefined
      }
    />
  );
};

export default CertificateTemplateAlert;
