import { NavLink, Outlet } from 'react-router-dom'
import { User, Building, Key, Sliders, Bell, Palette, Shield, Plug, Clock } from 'lucide-react'
import { cn } from '@/lib/utils'

const navItems = [
  { label: 'Profile', href: '/settings/profile', icon: User },
  { label: 'Organization', href: '/settings/organization', icon: Building },
  { label: 'API Keys', href: '/settings/api-keys', icon: Key },
  { label: 'Exploration Defaults', href: '/settings/defaults', icon: Sliders },
  { label: 'Schedules', href: '/settings/schedules', icon: Clock },
  { label: 'Notifications', href: '/settings/notifications', icon: Bell },
  { label: 'Integrations', href: '/settings/integrations', icon: Plug },
  { label: 'Appearance', href: '/settings/appearance', icon: Palette },
  { label: 'License', href: '/settings/license', icon: Shield },
]

export function SettingsLayout() {
  return (
    <div className="flex gap-8">
      <nav className="w-48 shrink-0 space-y-1">
        <h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide px-3 mb-3">
          Settings
        </h2>
        {navItems.map(item => (
          <NavLink
            key={item.href}
            to={item.href}
            className={({ isActive }) =>
              cn(
                'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
                isActive
                  ? 'bg-accent text-accent-foreground font-medium'
                  : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
              )
            }
          >
            <item.icon className="h-4 w-4 shrink-0" />
            {item.label}
          </NavLink>
        ))}
      </nav>

      <div className="flex-1 min-w-0">
        <Outlet />
      </div>
    </div>
  )
}