import { useNavigate } from 'react-router-dom';

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

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

import useRoutes from '../../../../hooks/useRoutes';

const PendingSignatureAlert = ({ courseId }: { courseId: number }) => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();
  const routes = useRoutes();

  const handleSign = () => navigate(routes.courses.sign(courseId));

  return (
    <HuAlert
      title={t('course.signature.pending')}
      description={t('course.signature.pending_alert')}
      action={{ text: t('course.signature.sign_now'), onClick: handleSign }}
      severity="warning"
      sx={{ '& .MuiAlert-message': { maxWidth: '185px' } }}
    />
  );
};

export default PendingSignatureAlert;