import Link from "next/link";
import { ShoppingBasket } from "lucide-react";
import { CartItemRow } from "@/components/customer/cart-item-row";
import type { CartGroup } from "@/types/api";
import type { ReactNode } from "react";

/** Shared between /cart and /checkout/[store] — the pixel-perfect per-store card. */
export function StoreCartCard({ group, children }: { group: CartGroup; children?: ReactNode }) {
  return (
    <section className="relative rounded-2xl border border-gray-300 bg-white p-6 shadow-[0_2px_10px_-6px_rgba(0,0,0,0.039),0_14px_28px_-12px_rgba(0,0,0,0.071)]">
      <span className="absolute -top-3 left-4 rounded-lg bg-blue-bg px-2.5 py-1 text-[12px] font-semibold leading-none text-primary-action">
        {group.items.length.toLocaleString("fa-IR")} کالا
      </span>

      <Link
        href={`/stores/${group.store.uuid}`}
        className="mb-3 flex items-center justify-start gap-2 border-b border-b-[#E4E4E7] pb-5"
      >
        <ShoppingBasket className="h-4.5 w-4.5 text-foreground" />
        <span className="text-[16px] font-bold leading-none text-foreground">{group.store.name}</span>
      </Link>

      <div className="divide-y divide-gray-200">
        {group.items.map((item) => (
          <CartItemRow key={item.uuid} item={item} />
        ))}
      </div>

      <div className="flex items-center justify-start border-t border-gray-200 pt-5 pb-1">
        <span className="text-[13px] font-semibold leading-none text-foreground">
          جمع فروشگاه: {group.items_subtotal.toLocaleString("fa-IR")} تومان
        </span>
      </div>

      {children}
    </section>
  );
}