import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation: React.FC = () => {
  const navItems = [
    { path: '/queue', label: 'Queue', icon: '📋' },
    { path: '/search', label: 'Search', icon: '🔍' },
    { path: '/favorites', label: 'Favorites', icon: '❤️' },
    { path: '/new-songs', label: 'New Songs', icon: '🆕' },
    { path: '/artists', label: 'Artists', icon: '🎤' },
    { path: '/song-lists', label: 'Song Lists', icon: '📝' },
    { path: '/history', label: 'History', icon: '⏰' },
    { path: '/top-played', label: 'Top 100', icon: '🏆' },
    { path: '/singers', label: 'Singers', icon: '👥' },
  ];

  return (
    <nav className="bg-white border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex space-x-8">
          {navItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) => `
                flex items-center px-3 py-4 text-sm font-medium border-b-2 transition-colors
                ${isActive
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }
              `}
            >
              <span className="mr-2">{item.icon}</span>
              {item.label}
            </NavLink>
          ))}
        </div>
      </div>
    </nav>
  );
};

export default Navigation;