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

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

import { type PathsPaginatedQueryStates } from '../../hooks/useGetPaths';
import { type PathStatus } from '../../types';

export type PathListStateCardProps = {
  status: PathStatus;
  state: PathsPaginatedQueryStates;
  onRetry: () => void;
};

export const PathListStateCard = ({
  status,
  state,
  onRetry,
}: PathListStateCardProps) => {
  const { t } = useLokaliseTranslation('learning');

  const cardPropsByState = {
    error: {
      variant: 'warning' as const,
      title: t('empty.error.title'),
      description: t('empty.error.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('empty.network.title'),
      description: t('empty.network.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    empty: {
      title: t(`empty.paths.${status}.title`),
      description: t(`empty.paths.${status}.description`),
    },
    emptySearch: {
      title: t('empty.paths.search.title'),
      description: t('empty.paths.search.description'),
    },
  };

  const cardProps = cardPropsByState[state as keyof typeof cardPropsByState];

  if (!cardProps) return null;

  return <StateCard {...cardProps} />;
};

export default PathListStateCard;
