"use client";

import { Separator } from "@heroui/react";
import type { CartLineItemsProps } from "@/lib/cart/types";
import { CartItemCard } from "./CartItemCard";

/**
 * Card-based list of cart line items. Replaces the previous table layout.
 * Used inside CartContent for both page and overlay layouts.
 */
export function CartLineItems({
  items,
  onUpdateQuantity,
  onRemove,
  variant = "compact",
}: CartLineItemsProps & { variant?: "compact" | "full" }) {
  if (items.length === 0) return null;

  return (
    <div className="flex flex-col" role="list" aria-label="Cart items">
      {items.map((item, idx) => (
        <div key={item.variantId} role="listitem">
          <CartItemCard
            item={item}
            onUpdateQuantity={onUpdateQuantity}
            onRemove={onRemove}
            variant={variant}
          />
          {idx < items.length - 1 && <Separator className="my-3" />}
        </div>
      ))}
    </div>
  );
}
