import { Link, useLocation } from 'react-router-dom'
import type { ReactNode } from 'react'

const nav = [
  { to: '/', label: 'Dashboard', icon: '⊞' },
  { to: '/settings', label: 'Settings', icon: '🖥' },
  { to: '/configs', label: 'Configs', icon: '⚙' },
  { to: '/modlists', label: 'Modlists', icon: '📦' },
  { to: '/mods', label: 'Mods', icon: '🗂' },
  { to: '/logs', label: 'Logs', icon: '📋' },
  { to: '/status', label: 'Status', icon: '📊' },
]

export default function Layout({ children }: { children: ReactNode }) {
  const loc = useLocation()

  return (
    <div className="flex h-screen bg-neutral-950 text-neutral-100">
      <aside className="w-56 border-r border-neutral-800 p-4 flex flex-col gap-2">
        <h1 className="text-lg font-bold mb-4 tracking-tight">Arma3 Web</h1>
        {nav.map(item => (
          <Link
            key={item.to}
            to={item.to}
            className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${
              loc.pathname === item.to || (item.to !== '/' && loc.pathname.startsWith(item.to))
                ? 'bg-neutral-800 text-white'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800/50'
            }`}
          >
            <span>{item.icon}</span>
            {item.label}
          </Link>
        ))}
      </aside>
      <main className="flex-1 overflow-auto p-6">{children}</main>
    </div>
  )
}