import { useAuth } from 'src/contexts/JWTContext';
import { formatUTCLocalDate } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { ProductListItem } from '../../components/ProductListItem';
import { type Exchange } from '../../types';
import { getExchangePill } from '../../utils';

type HistoryListItemProps = {
  exchange: Exchange;
};

export const HistoryListItem = ({ exchange }: HistoryListItemProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { user } = useAuth();

  const { type, labelKey } = getExchangePill(exchange);
  const orderDate = user ? formatUTCLocalDate(exchange.createdAt, user) : '';

  return (
    <ProductListItem
      product={exchange.product}
      copetin={t('products.order_date', { date: orderDate })}
      sidePill={{ label: t(labelKey), type, size: 'small' }}
    />
  );
};
