import { StoreCartLineItem, StoreOrderLineItem } from '@medusajs/types';
// import LineItemOptions from "@modules/common/components/line-item-options"
import LineItemPrice from '@modules/common/components/line-item-price';
import LineItemUnitPrice from '@modules/common/components/line-item-unit-price';

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

export default function OrderItem({
  item,
  currencyCode,
}: {
  item: StoreCartLineItem | StoreOrderLineItem;
  currencyCode: string;
}) {
  const partnerLocationName = item.metadata?.partner_location_name;
  return (
    <TableRow className="w-full" data-testid="product-row">
      {/* <TableCell className="px-6 w-24">
        <div className="flex w-16">
          <Thumbnail thumbnail={item.thumbnail} size="square" />
        </div>
      </TableCell> */}

      <TableCell className="px-6 text-left">
        <span
          className="txt-medium-plus text-ui-fg-base"
          data-testid="product-name"
        >
          {item.product_title}
          {` ${partnerLocationName ? `(${partnerLocationName})` : ''}`}
        </span>
        {/* <LineItemOptions variant={item.variant} data-testid="product-variant" /> */}
      </TableCell>

      <TableCell className="px-6">
        <span className="flex h-full flex-col items-end justify-center">
          <span className="flex gap-x-1">
            <span className="text-ui-fg-muted">{item.quantity}x </span>
            <LineItemUnitPrice
              item={item}
              style="tight"
              currencyCode={currencyCode}
            />
          </span>

          <LineItemPrice
            item={item}
            style="tight"
            currencyCode={currencyCode}
          />
        </span>
      </TableCell>
    </TableRow>
  );
}
