import Image from "next/image";

import { cn } from "@/lib/utils";

interface ItemDetail {
  id: string;
  name: string;
  imageSrc: string;
  imageAlt?: string;
  size?: string;
  color?: string;
  quantity?: number;
  price: string;
  oldPrice?: string;
  discountBadge?: string;
}

interface ItemDetailsProps {
  title?: string;
  shopName?: string;
  shopLogoSrc?: string;
  items?: ItemDetail[];
  className?: string;
}

const defaultItems: ItemDetail[] = [
  {
    id: "calla-tote",
    name: "Calla Tote Bag - Espresso Brown",
    imageSrc: "/images/tote-gallery-1.png",
    size: "Small",
    color: "Espresso Brown",
    quantity: 1,
    price: "LKR 5,000.00",
    oldPrice: "LKR 5,600.00",
    discountBadge: "-50%",
  },
  {
    id: "satin-heel",
    name: "Satin Teardrop Heel",
    imageSrc: "/images/tote-gallery-3.png",
    size: "41",
    color: "Silver",
    quantity: 1,
    price: "LKR 8,000.00",
  },
];

export default function ItemDetails({
  title,
  shopName = "Cozy",
  shopLogoSrc = "/images/cozy-round.svg",
  items = defaultItems,
  className,
}: ItemDetailsProps) {
  const heading = title ?? `Item Details (${items.length} Items)`;

  return (
    <section className={cn("w-full max-w-[620px] rounded-lg bg-[#f7f7f8] p-6 text-[#1f2440]", className)}>
      <h2 className="text-2xl font-medium">{heading}</h2>

      <div className="mt-8 rounded-lg bg-white px-3 py-3">
        <div className="flex items-center gap-3">
          {shopLogoSrc && (
            <div className="relative h-8 w-8 overflow-hidden rounded-full">
              <Image src={shopLogoSrc} alt={shopName} fill sizes="32px" className="object-cover" />
            </div>
          )}
          <span className="text-sm font-medium text-gray-900">{shopName}</span>
        </div>
      </div>

      <div className="mt-8 space-y-8">
        {items.map((item) => (
          <article key={item.id} className="flex gap-8">
            <div className="relative h-28 w-24 shrink-0 overflow-hidden rounded bg-gray-100">
              <Image
                src={item.imageSrc}
                alt={item.imageAlt ?? item.name}
                fill
                sizes="96px"
                className="object-cover"
              />
            </div>

            <div className="min-w-0 space-y-2">
              <h3 className="text-lg font-medium text-[#1f2440]">{item.name}</h3>
              <p className="text-xs text-gray-500">
                {item.size && <>Size: {item.size}</>}
                {item.size && item.color && <span> · </span>}
                {item.color && <>Color: {item.color}</>}
                {(item.size || item.color) && item.quantity && <span> · </span>}
                {item.quantity && <>Qty: {item.quantity}</>}
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <span className="text-xl font-medium text-[#101936]">{item.price}</span>
                {item.oldPrice && (
                  <span className="text-base text-red-500 line-through">{item.oldPrice}</span>
                )}
              </div>
              {item.discountBadge && (
                <span className="inline-flex rounded bg-red-500 px-2 py-1 text-[10px] font-semibold text-white">
                  {item.discountBadge}
                </span>
              )}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
