"use client"

import { useState, type ComponentType, type ReactNode } from "react"
import { Menu } from "lucide-react"

import { cn } from "@/lib/utils"

export interface ShellNavItem {
  label: string
  href?: string
  icon?: ComponentType<{ className?: string }>
  active?: boolean
}

export interface TopnavShellProps {
  children: ReactNode
  brand?: ReactNode
  nav?: ShellNavItem[]
  actions?: ReactNode
  renderLink?: (item: ShellNavItem, content: ReactNode) => ReactNode
  className?: string
}

function renderNav(item: ShellNavItem, content: ReactNode, renderLink?: TopnavShellProps["renderLink"]) {
  if (renderLink) return renderLink(item, content)
  return (
    <a href={item.href ?? "#"} className="block">
      {content}
    </a>
  )
}

export function TopnavShell({ children, brand, nav = [], actions, renderLink, className }: TopnavShellProps) {
  const [open, setOpen] = useState(false)
  return (
    <div className={cn("relative flex h-full w-full flex-col overflow-hidden bg-background text-foreground", className)}>
      <header className="flex h-14 shrink-0 items-center gap-4 border-b px-4 sm:px-6">
        <div className="flex items-center gap-2">{brand}</div>
        <nav className="hidden items-center gap-1 md:flex">
          {nav.map((item) => (
            <div key={item.label}>
              {renderNav(
                item,
                <span
                  className={cn(
                    "rounded-md px-3 py-1.5 text-sm transition-colors",
                    item.active
                      ? "bg-accent font-medium text-foreground"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {item.label}
                </span>,
                renderLink,
              )}
            </div>
          ))}
        </nav>
        {actions ? <div className="ml-auto flex items-center gap-2">{actions}</div> : null}
        {nav.length ? (
          <button
            type="button"
            onClick={() => setOpen((prev) => !prev)}
            className={cn(
              "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden",
              actions ? "" : "ml-auto",
            )}
            aria-label="Toggle navigation"
          >
            <Menu className="size-5" />
          </button>
        ) : null}
      </header>

      {open ? (
        <nav className="flex flex-col gap-0.5 border-b p-2 md:hidden">
          {nav.map((item) => (
            <div key={item.label} onClick={() => setOpen(false)}>
              {renderNav(
                item,
                <span
                  className={cn(
                    "flex items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors",
                    item.active
                      ? "bg-accent font-medium text-foreground"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {item.icon ? <item.icon className="size-4" /> : null}
                  {item.label}
                </span>,
                renderLink,
              )}
            </div>
          ))}
        </nav>
      ) : null}

      <main className="flex-1 overflow-y-auto">
        <div className="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">{children}</div>
      </main>
    </div>
  )
}
Installation
