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

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

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

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

import { performanceRoutes } from '../../routes';

type CalibrationErrorStateProps = {
  cycleId: string | number;
  title: string;
};

const CalibrationErrorState = ({
  cycleId,
  title,
}: CalibrationErrorStateProps) => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation(['performance']);

  const handleBack = () =>
    navigate(performanceRoutes.review.detail(Number(cycleId)));

  return (
    <Stack sx={{ alignItems: 'center', justifyContent: 'center', py: 6 }}>
      <HuStateCard
        sx={{ p: 3, maxWidth: 480 }}
        slotProps={{
          title: { title },
          avatar: {
            Icon: IconInfoCircle as HuAvatarProps['Icon'],
            size: 'large',
            color: 'primary',
          },
        }}
      />
      <Button
        variant="text"
        onClick={handleBack}
        sx={{ mt: 2 }}
      >
        {t('performance:calibration.detail.back_to_list')}
      </Button>
    </Stack>
  );
};

export default CalibrationErrorState;