/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import Link from "next/link";
import { ArrowRight, ShoppingBag } from "lucide-react";
import type { Product } from "@/types/product/product";
import ProductCard from "./ProductCard";

interface ProductGridProps {
  products: Product[];
}

export default function ProductGrid({ products }: ProductGridProps) {
  return (
    <section id="products" className="scroll-mt-24 py-20 bg-white text-slate-900 relative">
      <div className="container mx-auto px-6">
        <div className="mb-16 text-center max-w-6xl mx-auto px-6">
          <span className="text-xs uppercase tracking-widest font-black text-brand-accent mb-3 block">
            Our Collection
          </span>
          <h2 className="text-3xl md:text-5xl font-black text-zinc-900 uppercase tracking-tight mb-4">
            Latest Products
          </h2>
          <p className="text-zinc-650 text-sm md:text-base font-medium max-w-lg mx-auto">
            Genuine electronics, appliances and gadgets with warranty
          </p>
        </div>

        {/* Dynamic Card Area */}
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 transition-all duration-300">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}

          {products.length > 0 && (
            <Link
              href="/products"
              className="group/card relative aspect-[4/5] overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50 p-6 md:p-8 flex flex-col justify-between text-zinc-900 shadow-md transition-all duration-500 ease-out hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.15)]"
            >
              <div className="flex flex-col h-full justify-between">
                <div>
                  <div className="bg-brand-accent/10 text-brand-accent w-12 h-12 rounded-full flex items-center justify-center mb-6 border border-brand-accent/20 transition-colors duration-300 group-hover/card:bg-brand-accent group-hover/card:text-white">
                    <ShoppingBag className="w-6 h-6" />
                  </div>
                  <span className="text-zinc-500 text-xs font-black uppercase tracking-widest block mb-2">
                    Full Catalog
                  </span>
                  <h3 className="text-xl md:text-2xl font-black uppercase tracking-tight mb-3 text-zinc-900 group-hover/card:text-brand-accent transition-colors">
                    View All Products
                  </h3>
                  <p className="text-zinc-650 text-sm leading-relaxed font-medium">
                    Explore our full range of products with side filters, price ranges, and brands.
                  </p>
                </div>

                <div className="mt-auto pt-6">
                  <div className="inline-flex items-center gap-2 rounded-xl bg-brand-accent px-5 py-3 text-xs font-black uppercase tracking-wider text-white transition-all duration-300 ease-out hover:bg-brand-accent-hover group-hover/card:scale-105 shadow-md shadow-brand-accent/20">
                    View All
                    <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover/card:translate-x-1" />
                  </div>
                </div>
              </div>
            </Link>
          )}
        </div>
      </div>
    </section>
  );
}