import { Link } from 'react-router-dom';
import { CategoryTitles } from '../../types';

interface NavigationProps {
  categories: number[];
  currentCategory: string | null;
  currentCity: string | null;
}

export function Navigation({ categories, currentCategory, currentCity }: NavigationProps) {
  return (
    <div className="flex items-center space-x-4 overflow-x-auto">
      {categories.map((category) => (
        <Link
          key={category}
          to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
          className={`px-3 py-2 font-medium transition-colors whitespace-nowrap ${
            Number(currentCategory) === category
                ? 'text-base md:text-lg lg:text-xl font-semibold text-blue-600 hover:text-blue-800 bg-gray-200'
                : 'text-sm md:text-base lg:text-lg font-medium text-gray-600 hover:text-gray-900'
          }`}
        >
          {CategoryTitles[category]}
        </Link>
      ))}
    </div>
  );
}