'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

const NAV_ITEMS = [
  { href: '/', label: 'Dashboard' },
  { href: '/docker', label: 'Docker' },
  { href: '/git', label: 'Git' },
  { href: '/systemd', label: 'systemd' },
  { href: '/caddy', label: 'Caddy' },
  { href: '/flows', label: 'Flows' },
  { href: '/audit', label: 'Audit' },
  { href: '/settings', label: 'Settings' },
]

export default function AppNav() {
  const pathname = usePathname()

  return (
    <nav className="sticky top-0 z-10 border-b border-border bg-background/95 backdrop-blur">
      <div className="mx-auto max-w-6xl px-6 py-3 flex items-center gap-6">
        <Link href="/" className="mr-2 text-sm font-semibold tracking-tight shrink-0">
          Ops Dashboard
        </Link>
        {NAV_ITEMS.map((item) => {
          const isActive =
            item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'text-sm transition-colors',
                isActive
                  ? 'text-foreground font-medium'
                  : 'text-muted-foreground hover:text-foreground',
              )}
            >
              {item.label}
            </Link>
          )
        })}
      </div>
    </nav>
  )
}