import { useNavigate } from 'react-router';

import { IconCircleCheck } from '@material-hu/icons/tabler';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import { type AvatarProps as HuAvatarProps } from '@material-hu/components/design-system/Avatar/types';

import { performanceRoutes } from 'src/pages/dashboard/performance/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';

type AllReviewsCompletedProps = {
  isExternal?: boolean;
};

const AllReviewsCompleted = (props: AllReviewsCompletedProps) => {
  const { isExternal } = props;
  const { t } = useLokaliseTranslation('performance');
  const navigate = useNavigate();

  const handleOnClick = () => navigate(performanceRoutes.performance());

  return (
    <HuStateCard
      sx={{ py: 3, width: '100%' }}
      slotProps={{
        title: {
          title: t('review_completed.finished.title'),
          description: t('review_completed.finished.description'),
          slotProps: {
            description: {
              sx: {
                whiteSpace: 'pre-line',
              },
            },
          },
        },
        avatar: {
          Icon: IconCircleCheck as HuAvatarProps['Icon'],
          size: 'large',
          color: 'success',
        },
        button: !isExternal
          ? {
              children: t('review_completed.finished.back_button'),
              variant: 'contained',
              onClick: handleOnClick,
              sx: { mt: 3 },
            }
          : undefined,
      }}
    />
  );
};

export default AllReviewsCompleted;