import repeat from '@lib/util/repeat';
import { StoreOrder } from '@medusajs/types';
import SkeletonLineItem from '@modules/skeletons/components/skeleton-line-item';

import { Heading } from '@kit/ui/heading';
import { Table, TableBody } from '@kit/ui/table';
import { Trans } from '@kit/ui/trans';

import OrderItem from './order-item';

export default function OrderItems({
  medusaOrder,
}: {
  medusaOrder: StoreOrder;
}) {
  const items = medusaOrder.items;

  return (
    <div className="flex flex-col gap-y-4">
      <Heading level={5} className="text-3xl-regular flex flex-row">
        <Trans i18nKey="cart:orderConfirmed.summary" />
      </Heading>
      <div className="flex flex-col">
        <Table className="border-separate rounded-lg border">
          <TableBody data-testid="products-table">
            {items?.length
              ? items
                  .sort((a, b) =>
                    (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
                  )
                  .map((item) => (
                    <OrderItem
                      key={item.id}
                      item={item}
                      currencyCode={medusaOrder.currency_code}
                    />
                  ))
              : repeat(5).map((i) => <SkeletonLineItem key={i} />)}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
