import React, { useState } from 'react';

interface CategoryItem {
  name: string;
}

interface Category {
  title: string;
  items: CategoryItem[];
}

interface CategoriesSectionProps {
  isVisible: boolean;
}

const CategoriesSection: React.FC<CategoriesSectionProps> = ({ isVisible }) => {
  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);

  const categories: Category[] = [
    {
      title: 'Neprospásnete',
      items: [
        { name: 'Řemedyu a umělé těxy' },
        { name: 'Paletky na uši a oči' },
        { name: 'Tuzky na uši' },
        { name: 'Oční linky' },
      ],
    },
    {
      title: 'Novelty',
      items: [
        { name: 'Na oči' },
        { name: 'Paletky na uši a oči' },
        { name: 'Tuzky na uší' },
        { name: 'Očni linky' },
      ],
    },
    {
      title: 'Slovy',
      items: [
        { name: 'Makup-upy' },
        { name: 'BB & CC & DD kremy' },
        { name: 'Puderové báry' },
        { name: 'Pudry' },
      ],
    },
    {
      title: 'Výprodej',
      items: [
        { name: 'Na rty' },
        { name: 'Takové rtánky' },
        { name: 'Dvoušíproudné rtánky' },
        { name: 'Balzámy na rty' },
      ],
    },
    {
      title: 'Dárkové sady',
      items: [
        { name: 'Na nehty' },
        { name: 'Usodla nehty' },
        { name: 'Na ošetří' },
        { name: 'Tuľky a pudy na ošetří' },
      ],
    },
  ];

  if (!isVisible) return null;

  return (
    <div className="fixed top-auto md:top-44 left-0 right-0 z-40 bg-gradient-to-r from-luxury-gold/20 to-luxury-gold/10 backdrop-blur-md border-b border-luxury-gold/30 animate-in fade-in duration-200 md:max-h-96 overflow-y-auto">
      <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 md:gap-4 py-4 md:py-6">
          {categories.map((category, index) => (
            <div
              key={index}
              className="cursor-pointer"
            >
              <button
                onClick={() => setExpandedCategory(expandedCategory === category.title ? null : category.title)}
                className="w-full md:hidden text-left py-2 flex items-center justify-between"
              >
                <h3 className="text-xs font-bold text-luxury-dark uppercase tracking-wide">
                  {category.title}
                </h3>
                <span className={`transform transition-transform ${expandedCategory === category.title ? 'rotate-180' : ''}`}>
                  ▼
                </span>
              </button>

              <h3 className="hidden md:block text-xs md:text-sm font-bold text-luxury-dark mb-2 md:mb-3 uppercase tracking-wide">
                {category.title}
              </h3>

              <div className={`space-y-1 md:space-y-2 ${expandedCategory === category.title ? 'block md:block' : 'hidden md:block'}`}>
                {category.items.map((item, itemIndex) => (
                  <p
                    key={itemIndex}
                    className="text-xs text-luxury-dark/80 hover:text-luxury-dark hover:font-semibold transition-all cursor-pointer py-1"
                  >
                    {item.name}
                  </p>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CategoriesSection;