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

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

type CatalogStateCardProps = {
  state: PaginatedQueryStates;
  onRetry: () => void;
};

export const CatalogStateCard = ({ state, onRetry }: CatalogStateCardProps) => {
  const { t } = useLokaliseTranslation(['acknowledgements', 'general']);

  const cardPropsByState = {
    error: {
      variant: 'error' as const,
      title: t('general:error_title'),
      description: t('general:error_description'),
      primaryAction: { label: t('general:retry'), onClick: onRetry },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('general:network_error_title'),
      description: t('general:network_error_description'),
      primaryAction: { label: t('general:retry'), onClick: onRetry },
    },
    empty: {
      title: t('products.products_empty_title'),
      description: t('products.products_empty_description'),
    },
  };

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

  if (!cardProps) return null;

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

export default CatalogStateCard;
