import { IconAlertCircle, IconInfoCircle } from '@material-hu/icons/tabler';

import { StateCard } from '@material-hu/components/composed-components/StateCard';

import { type PaginatedQueryState } from 'src/hooks/usePaginatedQueryState';
import { useLokaliseTranslation } from 'src/utils/i18n';

type TableStatesProps = {
  queryState: PaginatedQueryState;
  onRetry: () => void;
};

export const TableStates = ({ queryState, onRetry }: TableStatesProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { isError, isEmptySearch } = queryState;

  return (
    <>
      {isError && (
        <StateCard
          slotProps={{
            avatar: {
              Icon: IconAlertCircle,
              color: 'primary',
            },
            title: {
              title: t('empty.error.title'),
              description: t('empty.error.description'),
            },
            button: {
              children: t('general:retry'),
              onClick: () => onRetry(),
            },
          }}
        />
      )}
      {isEmptySearch && (
        <StateCard
          slotProps={{
            avatar: {
              Icon: IconInfoCircle,
              color: 'primary',
            },
            title: {
              title: t('general:empty_search_title'),
              description: t('general:empty_search_description'),
            },
          }}
        />
      )}
    </>
  );
};