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-gradient-to-b from-purple-50 to-pink-50/50 rounded-2xl p-3">
      <button
        onClick={() => onSelect(undefined)}
        className={`flex items-center gap-3 w-full px-3 py-2.5 rounded-xl text-sm font-medium transition-colors cursor-pointer
          ${!selected ? 'bg-white/70 text-primary-700 shadow-sm' : 'text-purple-700/70 hover:bg-white/40'}`}
      >
        <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.5 rounded-xl text-sm font-medium transition-colors cursor-pointer
            ${selected === value ? 'bg-white/70 text-primary-700 shadow-sm' : 'text-purple-700/70 hover:bg-white/40'}`}
        >
          <Icon className="w-4 h-4" />
          {label}
        </button>
      ))}
      <hr className="my-2 border-purple-200/30" />
      <a
        href="/sell"
        className="flex items-center justify-center gap-2 w-full px-3 py-2.5 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-pink-500 to-primary-600 hover:from-pink-600 hover:to-primary-700 transition-all cursor-pointer shadow-sm"
      >
        <Package className="w-4 h-4" />
        Sell Item
      </a>
    </nav>
  );
}
