import { Smartphone, Armchair, Shirt, Home, Dumbbell, BookOpen, Gamepad2, Car, Package } from 'lucide-react';

const categories = [
  { value: 'ELECTRONICS', label: 'Electronics', icon: Smartphone },
  { value: 'FURNITURE', label: 'Furniture', icon: Armchair },
  { value: 'CLOTHING', label: 'Clothing & Shoes', icon: Shirt },
  { value: 'HOME_GARDEN', label: 'Home & Garden', icon: Home },
  { value: 'SPORTS', label: 'Sports & Outdoors', icon: Dumbbell },
  { value: 'BOOKS', label: 'Books', icon: BookOpen },
  { value: 'GAMES', label: 'Games', icon: Gamepad2 },
  { value: 'VEHICLES', label: 'Vehicles', icon: Car },
  { value: 'OTHER', label: 'Other', icon: Package },
];

interface CategorySidebarProps {
  selected?: string;
  onSelect: (category: string | undefined) => void;
}

export function CategorySidebar({ selected, onSelect }: CategorySidebarProps) {
  return (
    <nav className="bg-white rounded-2xl border border-gray-100 p-3">
      <h3 className="px-3 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">Categories</h3>
      <button
        onClick={() => onSelect(undefined)}
        className={`flex items-center gap-3 w-full px-3 py-2 rounded-xl text-sm font-medium transition-colors cursor-pointer
          ${!selected ? 'bg-primary-50 text-primary-700' : 'text-gray-600 hover:bg-gray-50'}`}
      >
        <Package className="w-4 h-4" />
        All Categories
      </button>
      {categories.map(({ value, label, icon: Icon }) => (
        <button
          key={value}
          onClick={() => onSelect(value)}
          className={`flex items-center gap-3 w-full px-3 py-2 rounded-xl text-sm font-medium transition-colors cursor-pointer
            ${selected === value ? 'bg-primary-50 text-primary-700' : 'text-gray-600 hover:bg-gray-50'}`}
        >
          <Icon className="w-4 h-4" />
          {label}
        </button>
      ))}
    </nav>
  );
}
