import { Link } from '@tanstack/react-router'

const navItems = [
  { label: 'Initiatives', to: '/initiatives' },
  { label: 'Agents', to: '/agents' },
  { label: 'Inbox', to: '/inbox' },
  { label: 'Settings', to: '/settings' },
] as const

export function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-6">
          <Link to="/initiatives" className="text-lg font-bold tracking-tight">
            Codewalk District
          </Link>
        </div>
        {/* Navigation */}
        <nav className="mx-auto flex max-w-7xl gap-1 px-6 pb-2">
          {navItems.map((item) => (
            <Link
              key={item.label}
              to={item.to}
              className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
              activeProps={{
                className: 'rounded-md px-3 py-1.5 text-sm font-medium text-foreground bg-muted',
              }}
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </header>

      {/* Page content */}
      <main className="mx-auto max-w-7xl px-6 py-6">
        {children}
      </main>
    </div>
  )
}
