import type { RentalCategory } from '../../types/rental';

interface CategoryItem {
  value: RentalCategory;
  label: string;
  emoji: string;
}

const categories: CategoryItem[] = [
  { value: 'APARTMENT', label: 'Apartments', emoji: '\u{1F3E0}' },
  { value: 'HOUSE', label: 'Houses', emoji: '\u{1F3E1}' },
  { value: 'CAR', label: 'Cars', emoji: '\u{1F697}' },
  { value: 'MOTORCYCLE', label: 'Motorcycles', emoji: '\u{1F3CD}' },
  { value: 'BICYCLE', label: 'Bicycles', emoji: '\u{1F6B2}' },
  { value: 'EBIKE', label: 'E-Bikes', emoji: '\u26A1' },
];

interface RentalCategorySidebarProps {
  selected: string | null;
  onSelect: (category: string | null) => void;
}

export function RentalCategorySidebar({ selected, onSelect }: RentalCategorySidebarProps) {
  return (
    <nav className="bg-gradient-to-b from-purple-50 to-pink-50/50 rounded-2xl p-3">
      <button
        onClick={() => onSelect(null)}
        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'}`}
      >
        <span className="text-base">{'\u{1F3E0}'}</span>
        All Rentals
      </button>
      {categories.map(({ value, label, emoji }) => (
        <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'}`}
        >
          <span className="text-base">{emoji}</span>
          {label}
        </button>
      ))}
    </nav>
  );
}
