import { NavLink, Outlet } from 'react-router-dom'

const navItems = [
  { to: '/admin/games', label: 'Games' },
  { to: '/admin/pokemon', label: 'Pokemon' },
  { to: '/admin/evolutions', label: 'Evolutions' },
]

export function AdminLayout() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <h1 className="text-2xl font-bold mb-6">Admin Panel</h1>
      <div className="flex flex-col sm:flex-row gap-6 sm:gap-8">
        <nav className="flex-shrink-0 sm:w-48">
          <ul className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-visible">
            {navItems.map((item) => (
              <li key={item.to} className="flex-shrink-0">
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    `block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
                      isActive
                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
                        : 'hover:bg-gray-100 dark:hover:bg-gray-700'
                    }`
                  }
                >
                  {item.label}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>
        <div className="flex-1 min-w-0">
          <Outlet />
        </div>
      </div>
    </div>
  )
}