import Link from "next/link";
import type { Product } from "@/data/products";
import { formatCop } from "@/data/products";

const FALLBACK = [
  {
    slug: "visor-ot",
    name: "Visor OT",
    price: 89900,
    image: "/products/slides/accesorios/visor-ot/01-hero.png",
  },
  {
    slug: "gorra-ot",
    name: "Gorra OT",
    price: 99900,
    image: "/products/slides/accesorios/gorra-ot/01-hero.png",
  },
  {
    slug: "bolso-duffel-ot",
    name: "Bolso Duffel OT",
    price: 249900,
    image: "/products/slides/accesorios/bolso-duffel-ot/01-hero.png",
  },
  {
    slug: "neceser-ot",
    name: "Neceser OT",
    price: 119900,
    image: "/products/slides/accesorios/neceser-ot/01-hero.png",
  },
  {
    slug: "packaging-ot",
    name: "Packaging OT",
    price: 49900,
    image: "/products/slides/accesorios/packaging-ot/01-board.png",
  },
];

export function HomeAccessories({ products }: { products: Product[] }) {
  const fromStore = products
    .filter((p) => p.category === "accesorios")
    .slice(0, 6)
    .map((p) => ({
      slug: p.slug,
      name: p.name,
      price: p.price,
      image: p.images[0] || "/brand/ot-club-seal.png",
    }));

  const items = fromStore.length ? fromStore : FALLBACK;

  return (
    <section className="border-t border-black/5 bg-ot-cream py-16 md:py-18">
      <div className="ot-container">
        <div className="flex flex-wrap items-end justify-between gap-4 mb-8">
          <div>
            <p className="ot-eyebrow">Detalle</p>
            <h2 className="font-serif text-4xl md:text-5xl mt-2">Accesorios</h2>
            <p className="mt-2 text-ot-muted text-sm max-w-md">
              Cierra el look con la firma OT.
            </p>
          </div>
          <div className="hidden sm:block">
            <Link href="/shop?cat=accesorios" className="ot-btn ot-btn-ghost inline-flex">
              Ver accesorios
            </Link>
          </div>
        </div>

        <div className="flex gap-4 md:gap-5 overflow-x-auto pb-2 -mx-4 px-4 md:mx-0 md:px-0 snap-x snap-mandatory">
          {items.map((item) => (
            <Link
              key={item.slug}
              href={`/product/${item.slug}`}
              className="snap-start shrink-0 w-[42vw] sm:w-[220px] group"
            >
              <div className="aspect-square bg-ot-cream-dark overflow-hidden border border-black/5">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={item.image}
                  alt={item.name}
                  className="h-full w-full object-contain object-center p-3 transition duration-500 group-hover:scale-[1.03]"
                />
              </div>
              <p className="mt-3 font-serif text-lg leading-tight">{item.name}</p>
              <p className="mt-1 text-sm text-ot-muted">{formatCop(item.price)}</p>
            </Link>
          ))}
        </div>

        <div className="mt-8 sm:hidden">
          <Link href="/shop?cat=accesorios" className="ot-btn ot-btn-ghost inline-flex">
            Ver accesorios
          </Link>
        </div>
      </div>
    </section>
  );
}