import React from 'react';
import Link from 'next/link';
import { Code2, Bot, Server, Smartphone, ShieldCheck, Folder } from 'lucide-react';
import { Category } from '@/types';

const iconMap: Record<string, React.ReactNode> = {
  Code2: <Code2 className="w-7 h-7 text-indigo-600" />,
  Bot: <Bot className="w-7 h-7 text-indigo-600" />,
  Server: <Server className="w-7 h-7 text-indigo-600" />,
  Smartphone: <Smartphone className="w-7 h-7 text-indigo-600" />,
  ShieldCheck: <ShieldCheck className="w-7 h-7 text-indigo-600" />,
};

export default function CategoryGrid({ categories }: { categories: Category[] }) {
  return (
    <section className="py-10 md:py-14 px-4 bg-gray-50/50">
      <div className="container mx-auto max-w-7xl">
        <div className="flex items-center justify-between mb-8">
          <div>
            <span className="text-xs sm:text-sm font-bold text-indigo-600 tracking-wider uppercase">
              Explore Collections
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-gray-900 mt-1">
              Shop by Category
            </h2>
          </div>
          <Link
            href="/categories"
            className="text-indigo-600 hover:text-indigo-700 font-semibold text-sm flex items-center gap-1 group"
          >
            All Categories
            <span className="group-hover:translate-x-1 transition-transform">→</span>
          </Link>
        </div>

        {/* Scrollable / Responsive Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-6">
          {categories.map((category) => (
            <Link
              key={category.id}
              href={`/category/${category.id}`}
              className="group bg-white rounded-2xl p-5 shadow-sm hover:shadow-md border border-gray-100 transition-all transform hover:-translate-y-1 flex flex-col items-center text-center"
            >
              {/* Category Icon Badge */}
              <div className="w-16 h-16 rounded-2xl bg-indigo-50 group-hover:bg-indigo-600 group-hover:text-white flex items-center justify-center mb-3 transition-colors duration-300">
                {iconMap[category.icon] || <Folder className="w-7 h-7 text-indigo-600 group-hover:text-white" />}
              </div>

              {/* Title & Product Count */}
              <h3 className="font-bold text-sm sm:text-base text-gray-800 group-hover:text-indigo-600 transition-colors line-clamp-1">
                {category.name}
              </h3>
              <span className="text-xs text-gray-400 mt-1">
                {category.product_count || 0} Products
              </span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}