import Link from "next/link";
import { SHOP_ENABLED } from "@/lib/shop-config";
import type { Product } from "@/lib/types";

/**
 * CrossSell — sekcja cross-sell "Uzupełnij kolekcję" na PDP.
 * Pokazuje produkty z innej kolekcji (nie aktualnej).
 */
export function CrossSell({
  currentProduct,
  allProducts,
  version = "v2",
}: {
  currentProduct: Product;
  allProducts: Product[];
  version?: string;
}) {
  const others = allProducts.filter((p) => p.sku !== currentProduct.sku);

  if (others.length === 0) return null;

  return (
    <section className="mx-auto max-w-[1600px] px-6 py-16 md:px-12">
      <h2 className="mb-8 text-2xl font-extrabold tracking-tight text-ink md:text-3xl">
        Uzupełnij kolekcję
      </h2>
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {others.map((p) => {
          const firstVariant = p.variants[0];
          return (
            <Link
              key={p.sku}
              href={`/${version}/produkt/${p.sku}`}
              className="group flex gap-4 border border-line p-4 transition-colors hover:bg-offwhite"
            >
              <div className="relative h-24 w-20 flex-shrink-0 overflow-hidden bg-mist">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={firstVariant.media.packshot}
                  alt={p.name}
                  className="h-full w-full object-cover"
                />
              </div>
              <div className="flex flex-col justify-center">
                <p className="text-[10px] uppercase tracking-wider text-ash">
                  {p.collection}
                </p>
                <p className="text-sm font-medium text-ink">{p.name}</p>
                {SHOP_ENABLED && (
                  <p className="mt-1 text-sm font-bold tabular-nums text-ink">
                    {p.base_price.toLocaleString("pl-PL")} zł
                  </p>
                )}
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}