import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { CityTitles, CategoryTitles } from '../../types';

interface MobileMenuProps {
  isOpen: boolean;
  categories: number[];
  cities: number[];
  currentCategory: string | null;
  currentCity: string | null;
  onCityChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  onClose: () => void;
}

export function MobileMenu({ 
  isOpen, 
  categories, 
  cities, 
  currentCategory, 
  currentCity, 
  onCityChange,
  onClose
}: MobileMenuProps) {

  // Блокируем прокрутку body при открытом меню
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="lg:hidden border-b border-gray-200">
      <div className="px-2 pt-2 pb-3 space-y-1">
        <div className="px-3 py-2">
          <h3 className="text-sm font-medium text-gray-500 mb-2">Столицы</h3>
          <select
            value={currentCity || ''}
            onChange={onCityChange}
            className="w-full bg-white px-3 py-2 text-base font-medium rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="">Все столицы</option>
            {cities.map((city) => (
              <option key={city} value={city}>
                {CityTitles[city]}
              </option>
            ))}
          </select>
        </div>

        <div className="px-3 py-2">
          <h3 className="text-sm font-medium text-gray-500 mb-2">Разделы</h3>
          <div className="space-y-0">
            {categories.map((category) => (
              <Link
                key={category}
                to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
                onClick={onClose} // закрываем меню при клике
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  Number(currentCategory) === category
                    ? 'bg-blue-50 text-blue-600'
                    : 'text-gray-600 hover:bg-gray-50'
                }`}
              >
                {CategoryTitles[category]}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}