import { type TFunction, Trans } from 'react-i18next';

import CheckIcon from '@material-hu/icons/material/Check';
import Link from '@material-hu/mui/Link';
import Skeleton from '@material-hu/mui/Skeleton';
import Typography from '@material-hu/mui/Typography';

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

type DataCheckStatusProps = {
  count?: number;
  isLoading?: boolean;
  onClick: () => void;
};

const DataCheckStatus = ({
  count,
  isLoading,
  onClick,
}: DataCheckStatusProps) => {
  const { t } = useLokaliseTranslation('people_experience');

  if (isLoading) {
    return (
      <Skeleton
        variant="text"
        sx={{ fontSize: '1rem', width: '300px' }}
      />
    );
  }

  return count === 0 ? (
    <CheckIcon color="success" />
  ) : (
    <Typography>
      <Trans
        i18nKey="missing_data_participants_count"
        t={t as TFunction}
        ns="people_experience"
        values={{
          count: count ?? 0,
        }}
        components={{
          a: (
            <Link
              key="participants"
              underline="hover"
              component="button"
              onClick={onClick}
              type="button"
            />
          ),
        }}
      />
    </Typography>
  );
};

export default DataCheckStatus;