import { IconGift } from '@material-hu/icons/tabler';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import { type ListItemProps } from '@material-hu/components/design-system/List/components/ListItem/types';

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

import { type Product } from '../types';

export type ProductListItemProps = {
  product: Pick<Product, 'name' | 'cost' | 'coverPicture'>;
  copetin?: string;
  sidePill?: ListItemProps['sidePill'];
};

export const ProductListItem = ({
  product,
  copetin,
  sidePill,
}: ProductListItemProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');

  const cost = `${product.cost} ${t('products.point', { count: product.cost })}`;

  return (
    <CardContainer
      fullWidth
      padding={0}
    >
      <ListItem
        avatar={{
          src: product.coverPicture ?? undefined,
          alt: '',
          Icon: IconGift,
          variant: 'square',
          color: 'primary',
        }}
        slotProps={{ avatar: { size: 'large' } }}
        text={{ copetin, title: product.name, description: cost }}
        sidePill={sidePill}
      />
    </CardContainer>
  );
};

export default ProductListItem;
