import { IconCertificate } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import PdfViewer from 'src/components/attachment/PdfViewer';

import useCertificate from '../../../hooks/useCertificate';
import { type Course } from '../../../types';

const CourseCertificate = ({ course }: { course: Course }) => {
  const { t } = useLokaliseTranslation('learning');

  const { file, download, close, isLoading } = useCertificate(course);

  return (
    <Stack sx={{ mt: 2 }}>
      {file && (
        <PdfViewer
          file={file}
          onClose={close}
          downloadFile
        />
      )}
      <Button
        variant="contained"
        onClick={download}
        startIcon={<IconCertificate />}
        loading={isLoading}
      >
        {t('common.view_certificate')}
      </Button>
    </Stack>
  );
};

export default CourseCertificate;
