import React from 'react';

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

import { Table, TableBody } from '@kit/ui/shadcn/table';

import MobileTableRow from './mobile-table-row';

const MobileCartItems = ({
  item,
  currencyCode,
  productColumnLabelKey,
}: {
  item: StoreCartLineItem;
  currencyCode: string;
  productColumnLabelKey: string;
}) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <Table className="border-separate rounded-lg border p-2">
      <TableBody>
        <MobileTableRow
          titleKey={productColumnLabelKey}
          value={item.product_title}
        />
        <MobileTableRow titleKey="cart:table.time" value={item.quantity} />
        <MobileTableRow
          titleKey="cart:table.price"
          value={formatCurrency({
            value: item.unit_price,
            currencyCode,
            locale: language,
          })}
        />
        <MobileTableRow
          titleKey="cart:table.total"
          value={
            item.total &&
            formatCurrency({
              value: item.total,
              currencyCode,
              locale: language,
            })
          }
        />
      </TableBody>
    </Table>
  );
};

export default MobileCartItems;