import { StoreCart, StoreCartLineItem } from "@medusajs/types"
import { Trans } from '@kit/ui/trans';
import CartItem from "./cart-item";
import {
  Table,
  TableBody,
  TableHead,
  TableRow,
  TableHeader,
} from '@kit/ui/table';

export default function CartItems({ cart, items, productColumnLabelKey }: {
  cart: StoreCart;
  items: StoreCartLineItem[];
  productColumnLabelKey: string;
}) {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <Table className="rounded-lg border border-separate">
      <TableHeader className="text-ui-fg-subtle txt-medium-plus">
        <TableRow>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey={productColumnLabelKey} />
          </TableHead>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey="cart:table.quantity" />
          </TableHead>
          <TableHead className="px-4 sm:px-6 min-w-[100px]">
            <Trans i18nKey="cart:table.price" />
          </TableHead>
          <TableHead className="px-4 sm:px-6 min-w-[100px] text-right">
            <Trans i18nKey="cart:table.total" />
          </TableHead>
          <TableHead className="px-4 sm:px-6">
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {items
          .sort((a, b) => (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1)
          .map((item) => (
            <CartItem
              key={item.id}
              item={item}
              currencyCode={cart.currency_code}
            />
          ))}
      </TableBody>
    </Table>
  )
}