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

import CertificatePreviewForm from 'src/pages/dashboard/Learning/Settings/Certificates/Create/components/CertificatePreviewForm';
import { useLokaliseTranslation } from 'src/utils/i18n';

const CertificatePreview = () => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <CardContainer fullWidth>
      <Title
        variant="M"
        title={t('common.preview')}
        description={t('settings.certificates.create_flow.preview_description')}
      />
      <CardContainer
        color="grey"
        fullWidth
        padding={16}
        sx={{ mt: 3 }}
      >
        <CertificatePreviewForm />
      </CardContainer>
    </CardContainer>
  );
};

export default CertificatePreview;
