import { NavLink } from 'react-router-dom'
import {
  MonitorSmartphone,
  ScrollText,
  Network,
  Database,
  FolderOpen,
  Sliders,
  Settings,
} from 'lucide-react'
import { cn } from '@/lib/utils'

const navItems = [
  { to: '/', icon: MonitorSmartphone, label: 'Devices' },
  { to: '/logcat', icon: ScrollText, label: 'Logcat' },
  { to: '/network', icon: Network, label: 'Network' },
  { to: '/storage', icon: Database, label: 'Storage' },
  { to: '/files', icon: FolderOpen, label: 'Files' },
  { to: '/runtime', icon: Sliders, label: 'Runtime' },
]

export function Sidebar() {
  return (
    <aside className="w-14 flex flex-col items-center py-3 gap-1 border-r border-border bg-card shrink-0">
      {navItems.map(({ to, icon: Icon, label }) => (
        <NavLink
          key={to}
          to={to}
          end={to === '/'}
          title={label}
          className={({ isActive }) =>
            cn(
              'flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground transition-colors hover:text-foreground hover:bg-accent',
              isActive && 'text-foreground bg-accent',
            )
          }
        >
          <Icon size={18} />
        </NavLink>
      ))}

      <NavLink
        to="/settings"
        title="Settings"
        className={({ isActive }) =>
          cn(
            'flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground transition-colors hover:text-foreground hover:bg-accent mt-auto',
            isActive && 'text-foreground bg-accent',
          )
        }
      >
        <Settings size={18} />
      </NavLink>
    </aside>
  )
}
