import React from 'react';
import {
  ChevronRight,
  Sparkles,
  ShoppingBag,
  Watch,
  Heart,
  Crown,
  Coffee,
  Smartphone,
  Tag,
} from 'lucide-react';

export interface CategoryItem {
  id: string;
  slug: string;
  title: string;
  countText: string;
  badgeIcon: React.ElementType;
  imageUrl: string;
}

const MAIN_HOMEPAGE_CATEGORIES: CategoryItem[] = [
  {
    id: 'health-beauty',
    slug: 'health-beauty',
    title: 'Health & Beauty',
    countText: '319 Products',
    badgeIcon: Sparkles,
    imageUrl: 'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'handbag-wallets-cases',
    slug: 'handbag-wallets-cases',
    title: 'Handbags, Wallets & Cases',
    countText: '420 Products',
    badgeIcon: ShoppingBag,
    imageUrl: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'jewelry',
    slug: 'jewelry',
    title: 'Jewelry',
    countText: '580 Products',
    badgeIcon: Crown,
    imageUrl: 'https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'apparel-accessories',
    slug: 'apparel-accessories',
    title: 'Apparel & Accessories',
    countText: '2,708 Products',
    badgeIcon: Tag,
    imageUrl: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'food-beverages-tobacco',
    slug: 'food-beverages-tobacco',
    title: 'Food, Beverages & Tobacco',
    countText: '185 Products',
    badgeIcon: Coffee,
    imageUrl: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'mens-fashion',
    slug: 'mens-fashion',
    title: "Men's Fashion",
    countText: '840 Products',
    badgeIcon: Tag,
    imageUrl: 'https://images.unsplash.com/photo-1617137984095-74e4e5e3613f?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'womens-fashion',
    slug: 'womens-fashion',
    title: "Women's Fashion",
    countText: '1,860 Products',
    badgeIcon: Heart,
    imageUrl: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=800&q=80',
  },
  {
    id: 'electronics',
    slug: 'electronics',
    title: 'Electronics',
    countText: '154 Products',
    badgeIcon: Smartphone,
    imageUrl: 'https://images.unsplash.com/photo-1508685096489-7aacd43bd3b1?auto=format&fit=crop&w=800&q=80',
  },
];

interface CategoryCardsProps {
  onSelectCategory?: (categoryId: string) => void;
}

export const CategoryCards: React.FC<CategoryCardsProps> = ({ onSelectCategory }) => {
  return (
    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6">
      
      {/* Title Header */}
      <div className="text-center space-y-2">
        <span className="text-xs font-bold tracking-widest text-[#C81E3D] uppercase bg-rose-50 border border-rose-100 px-3 py-1 rounded-full">
          EXPLORE DEPARTMENTS
        </span>
        <h2 className="text-2xl sm:text-3xl font-bold font-playfair text-[#1E2432]">
          Featured Categories
        </h2>
        <p className="text-xs text-slate-500 max-w-md mx-auto">
          Browse through our top departments with thousands of 100% original products
        </p>
      </div>

      {/* 8 Category Tiles Grid (2 per row on mobile, 4 on desktop) */}
      <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
        {MAIN_HOMEPAGE_CATEGORIES.map((cat) => {
          const IconComp = cat.badgeIcon;
          return (
            <div
              key={cat.id}
              onClick={() => onSelectCategory?.(cat.slug)}
              className="group bg-[#FFFDFB] rounded-2xl border border-[#F2E5D9] p-3 sm:p-4 shadow-xs hover:shadow-xl hover:border-[#C81E3D]/40 transition-all duration-300 flex flex-col justify-between cursor-pointer relative overflow-hidden"
            >
              {/* Image with Square Aspect Ratio */}
              <div className="relative aspect-square w-full rounded-xl overflow-hidden bg-[#FAF0E6]">
                <img
                  src={cat.imageUrl}
                  alt={cat.title}
                  onError={(e) => {
                    e.currentTarget.onerror = null;
                    e.currentTarget.src = 'https://images.unsplash.com/photo-1472851294608-062f824d29cc?auto=format&fit=crop&w=800&q=80';
                  }}
                  className="w-full h-full object-cover object-center group-hover:scale-108 transition-transform duration-500"
                  loading="lazy"
                />

                {/* Top Badge */}
                <div className="absolute top-2.5 left-2.5 bg-white/90 backdrop-blur-md text-slate-800 p-1.5 rounded-lg shadow-xs flex items-center gap-1 border border-amber-200/60">
                  <IconComp className="w-3.5 h-3.5 text-[#C81E3D]" />
                </div>
              </div>

              {/* Title & Product Count */}
              <div className="pt-3 space-y-1 text-center">
                <h3 className="text-xs sm:text-sm font-bold font-playfair text-slate-800 group-hover:text-[#C81E3D] transition-colors line-clamp-1">
                  {cat.title}
                </h3>
                <span className="text-[10px] font-semibold text-[#B8860B] block">
                  {cat.countText}
                </span>
              </div>

              {/* Hover link indicator */}
              <div className="pt-2 flex items-center justify-center text-[11px] font-bold text-[#C81E3D] group-hover:underline gap-0.5">
                <span>View Collection</span>
                <ChevronRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
              </div>
            </div>
          );
        })}
      </div>

    </div>
  );
};