"use client";

import React from "react";
import { Category } from "@/types";
import {
  GraduationCap,
  Briefcase,
  PenTool,
  FileText,
  Palette,
  FolderArchive,
  Printer,
  Monitor,
  ArrowRight,
} from "lucide-react";

interface CategoryGridProps {
  categories: Category[];
  selectedCategory: string;
  onSelectCategory: (id: string) => void;
}

const iconMap: Record<string, React.ReactNode> = {
  GraduationCap: <GraduationCap className="w-6 h-6" />,
  Briefcase: <Briefcase className="w-6 h-6" />,
  PenTool: <PenTool className="w-6 h-6" />,
  FileText: <FileText className="w-6 h-6" />,
  Palette: <Palette className="w-6 h-6" />,
  FolderArchive: <FolderArchive className="w-6 h-6" />,
  Printer: <Printer className="w-6 h-6" />,
  Monitor: <Monitor className="w-6 h-6" />,
};

export const CategoryGrid: React.FC<CategoryGridProps> = ({
  categories,
  selectedCategory,
  onSelectCategory,
}) => {
  return (
    <section className="py-12 bg-slate-50 border-b border-slate-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
          <div>
            <span className="text-xs font-bold uppercase tracking-wider text-amber-600 bg-amber-100 px-3 py-1 rounded-full">
              Explore Our Catalog
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">
              Browse Popular Stationery Categories
            </h2>
            <p className="text-slate-600 text-sm mt-1">
              Find everything for your classroom, home study, or corporate office.
            </p>
          </div>

          <button
            onClick={() => onSelectCategory("all")}
            className="inline-flex items-center gap-2 text-blue-900 hover:text-blue-950 font-bold text-sm hover:underline cursor-pointer"
          >
            <span>View All Categories</span>
            <ArrowRight className="w-4 h-4" />
          </button>
        </div>

        {/* Category Cards Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
          {categories.map((cat) => {
            const isSelected = selectedCategory === cat.id;
            return (
              <div
                key={cat.id}
                onClick={() => onSelectCategory(cat.id)}
                className={`group relative rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer shadow-sm hover:shadow-xl ${
                  isSelected
                    ? "border-amber-500 ring-2 ring-amber-500/50 bg-amber-500/5"
                    : "border-slate-200 bg-white hover:border-blue-900/40"
                }`}
              >
                {/* Background Image Container */}
                <div className="h-32 sm:h-36 overflow-hidden relative bg-slate-200">
                  <img
                    src={cat.image}
                    alt={cat.name}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent" />

                  {/* Icon Badge */}
                  <div className="absolute top-3 left-3 bg-white/90 backdrop-blur-md p-2 rounded-xl text-blue-950 shadow-md group-hover:bg-amber-500 group-hover:text-slate-950 transition-colors">
                    {iconMap[cat.icon] || <FileText className="w-6 h-6" />}
                  </div>

                  {/* Count Tag */}
                  <span className="absolute top-3 right-3 bg-slate-900/80 text-slate-200 text-[11px] font-semibold px-2 py-0.5 rounded-full border border-white/10">
                    {cat.itemCount}+ Items
                  </span>
                </div>

                {/* Content */}
                <div className="p-4 bg-white">
                  <h3 className="font-bold text-slate-900 text-sm sm:text-base group-hover:text-blue-900 transition-colors">
                    {cat.name}
                  </h3>
                  <p className="text-xs text-slate-500 line-clamp-2 mt-1">
                    {cat.description}
                  </p>

                  <div className="mt-3 flex items-center gap-1 text-xs font-bold text-amber-600 group-hover:text-amber-700">
                    <span>Shop {cat.name}</span>
                    <ArrowRight className="w-3.5 h-3.5 transform group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};