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

import type { Product } from "@/types/product/product";
import ProductCard from "./ProductCard";

interface TopSellingGridProps {
  products: Product[];
  title?: string;
  subtitle?: string;
  badge?: string;
}

export default function TopSellingGrid({
  products = [],
  title = "Top Selling Products",
  subtitle = "Our most popular electronics & appliances ordered by customers",
  badge = "Customer Favorites",
}: TopSellingGridProps) {
  if (!products || products.length === 0) return null;

  return (
    <section id="top-selling" className="py-20 bg-slate-50/50 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">
            {badge}
          </span>
          <h2 className="text-3xl md:text-5xl font-black text-zinc-900 uppercase tracking-tight mb-4">
            {title}
          </h2>
          <p className="text-zinc-650 text-sm md:text-base font-medium max-w-lg mx-auto">
            {subtitle}
          </p>
        </div>

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </section>
  );
}