import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronDown } from 'lucide-react';
import { CityTitles } from '../../types';

interface CitySelectorProps {
  cities: number[];
  currentCity: string | null;
}

export function CitySelector({ cities, currentCity }: CitySelectorProps) {
  const navigate = useNavigate();

  const handleCityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const city = event.target.value;
    const params = new URLSearchParams(window.location.search);
    
    if (city) {
      params.set('city', city);
    } else {
      params.delete('city');
    }
    
    navigate(`/?${params.toString()}`);
  };

  return (
      <div className="relative">
        <select
            value={currentCity || ''}
            onChange={handleCityChange}
            className="appearance-none bg-white pl-3 pr-8 py-2 text-sm font-medium rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
        >
          <option value="">Все столицы</option>
          {cities.map((city) => (
              <option key={city} value={city}>
                {CityTitles[city]}
              </option>
          ))}
        </select>
        <ChevronDown
            size={16}
            className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"
        />
      </div>
  );
}