"use client"

import { HttpTypes } from "@medusajs/types"
import DeleteButton from "@modules/common/components/delete-button"
import { useTranslation } from "react-i18next"
import {
  TableCell,
  TableRow,
} from '@kit/ui/table';
import { formatCurrency } from "@/packages/shared/src/utils"
import { Trash } from "lucide-react"

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

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

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

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

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

      <TableCell className="text-right px-6">
        <span className="flex gap-x-1 justify-end w-[60px]">
          <DeleteButton id={item.id} data-testid="product-delete-button" Icon={<Trash />} />
        </span>
      </TableCell>
    </TableRow>
  )
}