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

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

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

type TableErrorProps = {
  errorCount: number;
  onRetry: () => void;
};

export const TableError = ({ errorCount, onRetry }: TableErrorProps) => {
  const { t } = useLokaliseTranslation('ats');

  return (
    <StateCard
      title={t('common.error_title')}
      description={
        errorCount > 3
          ? t('common.error_description_fatal')
          : t('common.error_description')
      }
      icon={IconAlertTriangle}
      variant="warning"
      {...(errorCount <= 3 && {
        primaryAction: {
          label: t('common.try_again'),
          onClick: onRetry,
        },
      })}
      slotProps={{
        card: {
          sx: {
            whiteSpace: 'pre-line',
          },
        },
      }}
    />
  );
};