import { Link, useLocation } from 'react-router-dom';
import { Category } from '../../types';

interface NavigationProps {
  categories: Category[];
  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">
      <span className="text-sm font-medium text-gray-500"></span>
      <Link
        to={currentCity ? `/?city=${currentCity}` : '/'}
        className={`px-3 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
          !currentCategory
            ? 'text-blue-600 hover:text-blue-800'
            : 'text-gray-600 hover:text-gray-900'
        }`}
      >
        All Categories
      </Link>
      {categories.map((category) => (
        <Link
          key={category}
          to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
          className={`px-3 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
            currentCategory === category
              ? 'text-blue-600 hover:text-blue-800'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          {category}
        </Link>
      ))}
    </div>
  );
}