Category Grid

"use client";

import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";

interface Category { name: string; count: number; href: string; }
interface EcommerceCategoryGridProps { badge?: string; title?: string; categories?: Category[]; }
const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function EcommerceCategoryGrid({ badge = "Boutique", title = "Explorer par categorie", categories = [] }: EcommerceCategoryGridProps) {
  return (
    <section className="py-20 lg:py-28" style={{ background: "var(--color-background)" }}>
      <div className="mx-auto max-w-6xl px-6">
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease }} viewport={{ once: true }} className="mb-12">
          {badge && <span className="inline-block mb-4 text-xs font-medium tracking-widest uppercase" style={{ color: "var(--color-accent)" }}>{badge}</span>}
          <h2 className="text-3xl md:text-4xl font-bold" style={{ color: "var(--color-foreground)" }}>{title}</h2>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 lg:gap-6">
          {categories.map((cat, i) => (
            <motion.a key={cat.name} href={cat.href} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, ease, delay: i * 0.05 }} viewport={{ once: true }} className="group relative aspect-[4/3] rounded-xl overflow-hidden flex items-end p-6 transition-transform hover:scale-[1.02]" style={{ background: "var(--color-background-alt)", border: "1px solid var(--color-border)", textDecoration: "none" }}>
              <div className="flex items-end justify-between w-full">
                <div>
                  <h3 className="text-lg font-semibold" style={{ color: "var(--color-foreground)" }}>{cat.name}</h3>
                  <p className="text-xs mt-0.5" style={{ color: "var(--color-foreground-muted)" }}>{cat.count} produits</p>
                </div>
                <ArrowUpRight size={18} className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" style={{ color: "var(--color-foreground-light)" }} />
              </div>
            </motion.a>
          ))}
        </div>
      </div>
    </section>
  );
}