"use client";

import Link from "next/link";
import Image from "next/image";
import products from "@/lib/data/products.json";

export default function Related() {
  // Get the 6 latest products (assuming products are sorted by date in descending order)
  const latestProducts = products.slice(0, 6);

  return (
    <section className="mb-20 w-full overflow-x-hidden">
      <div className="mx-auto max-w-screen-2xl px-5 sm:px-8 lg:px-10">
        <div className="flex flex-col gap-12">
          <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
            <h2>Related Products</h2>
            <Link scroll={true} href="/products" className="flex h-9 flex-row items-center gap-1.5 rounded-lg border border-slate-300 px-4 text-sm">
              <span>See More Products</span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-4 shrink-0">
                <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
              </svg>
            </Link>
          </div>

          {/* Product Cards */}
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-3 gap-y-5 sm:gap-10 lg:grid-cols-5 xl:grid-cols-6">
            {latestProducts.map((product) => (
              <Link key={product.slug} href={`/products/${product.slug}`} scroll={true} className="group last:lg:hidden last:xl:flex relative flex w-full flex-col gap-2">
                {product.isNew && <div className="absolute right-3 top-3 z-20  h-6 items-center rounded-md bg-green-500 px-2 text-sm text-white flex">New</div>}
                <div className="flex w-full items-end justify-center bg-white border border-slate-200 rounded-lg overflow-hidden">
                  <Image src={product.images[0]} alt={product.title} width={500} height={500} className="aspect-square w-full shrink-0 origin-center rounded-lg object-contain transition delay-100 duration-1000 ease-in-out group-hover:scale-110" />
                </div>
                <div className="mt-2 flex flex-col items-center justify-between gap-2 sm:items-start">
                  <div className="flex flex-col items-center sm:items-start">
                    <span className="text-center text-base font-semibold underline-offset-2 group-hover:text-green-500 group-hover:underline sm:text-start">{product.title}</span>
                    <span className="text-xs">{product.category}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
