'use client';

import { formatCurrency } from '@/packages/shared/src/utils';
import { HttpTypes } from '@medusajs/types';
import { useTranslation } from 'react-i18next';

import { TableCell, TableRow } from '@kit/ui/table';

import CartItemDelete from './cart-item-delete';

export default function CartItem({
  item,
  currencyCode,
}: {
  item: HttpTypes.StoreCartLineItem;
  currencyCode: string;
}) {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <TableRow className="sm:w-full" data-testid="product-row">
      <TableCell className="w-[100%] px-4 text-left sm:px-6">
        <p
          className="txt-medium-plus text-ui-fg-base"
          data-testid="product-title"
        >
          {item.product_title}
        </p>
      </TableCell>

      <TableCell className="px-4 sm:px-6">{item.quantity}</TableCell>

      <TableCell className="min-w-[80px] px-4 sm:px-6">
        {formatCurrency({
          value: item.unit_price,
          currencyCode,
          locale: language,
        })}
      </TableCell>

      <TableCell className="min-w-[80px] px-4 text-right sm:px-6">
        {item.total &&
          formatCurrency({
            value: item.total,
            currencyCode,
            locale: language,
          })}
      </TableCell>

      <TableCell className="px-4 text-right sm:px-6">
        <span className="flex w-[60px] justify-end gap-x-1">
          <CartItemDelete id={item.id} />
        </span>
      </TableCell>
    </TableRow>
  );
}