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';

type CompletionCertificateActionProps = {
  course: Course;
};

const CompletionCertificateAction = ({
  course,
}: CompletionCertificateActionProps) => {
  const { t } = useLokaliseTranslation('learning');

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

  return (
    <>
      {file && (
        <PdfViewer
          file={file}
          onClose={close}
          downloadFile
        />
      )}
      <Button
        fullWidth
        variant="primary"
        size="large"
        onClick={download}
        loading={isLoading}
      >
        {t('common.view_certificate')}
      </Button>
    </>
  );
};

export default CompletionCertificateAction;