'use client';

import Link from 'next/link';
import { useState } from 'react';

const categories = {
  'Men': [
    { name: 'T-Shirts', href: '/collections/mens-t-shirts' },
    { name: 'Hoodies', href: '/collections/mens-hoodies' },
    { name: 'Pants', href: '/collections/mens-pants' },
    { name: 'Accessories', href: '/collections/mens-accessories' }
  ],
  'Women': [
    { name: 'Dresses', href: '/collections/womens-dresses' },
    { name: 'Tops', href: '/collections/womens-tops' },
    { name: 'Bottoms', href: '/collections/womens-bottoms' },
    { name: 'Accessories', href: '/collections/womens-accessories' }
  ]
};

export default function Categories() {
  const [activeSection, setActiveSection] = useState<string | null>(null);

  return (
    <div className="relative">
      <div className="flex gap-6">
        {Object.keys(categories).map((section) => (
          <button
            key={section}
            className="relative py-4 text-sm font-medium text-gray-700 hover:text-gray-900"
            onMouseEnter={() => setActiveSection(section)}
            onMouseLeave={() => setActiveSection(null)}
          >
            {section}
          </button>
        ))}
      </div>

      {/* Dropdown menu */}
      {activeSection && (
        <div
          className="absolute left-0 top-full z-10 w-48 rounded-md bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5"
          onMouseEnter={() => setActiveSection(activeSection)}
          onMouseLeave={() => setActiveSection(null)}
        >
          {categories[activeSection as keyof typeof categories].map((category) => (
            <Link
              key={category.name}
              href={category.href}
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
            >
              {category.name}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
} 