"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 AppShellProps {
  children: ReactNode
  brand?: ReactNode
  nav?: ShellNavItem[]
  title?: ReactNode
  actions?: ReactNode
  renderLink?: (item: ShellNavItem, content: ReactNode) => ReactNode
  className?: string
}

function NavLinks({
  nav,
  renderLink,
  onNavigate,
}: {
  nav: ShellNavItem[]
  renderLink?: AppShellProps["renderLink"]
  onNavigate?: () => void
}) {
  return (
    <nav className="flex flex-col gap-0.5 p-3">
      {nav.map((item) => {
        const content = (
          <span
            className={cn(
              "flex items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors",
              item.active
                ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
                : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
            )}
          >
            {item.icon ? <item.icon className="size-4" /> : null}
            {item.label}
          </span>
        )
        return (
          <div key={item.label} onClick={onNavigate}>
            {renderLink ? (
              renderLink(item, content)
            ) : (
              <a href={item.href ?? "#"} className="block">
                {content}
              </a>
            )}
          </div>
        )
      })}
    </nav>
  )
}

function Sidebar({
  brand,
  nav,
  renderLink,
  onNavigate,
}: {
  brand?: ReactNode
  nav: ShellNavItem[]
  renderLink?: AppShellProps["renderLink"]
  onNavigate?: () => void
}) {
  return (
    <div className="flex h-full w-60 flex-col border-r bg-sidebar text-sidebar-foreground">
      <div className="flex h-14 items-center gap-2 border-b px-5">{brand}</div>
      <NavLinks nav={nav} renderLink={renderLink} onNavigate={onNavigate} />
    </div>
  )
}

export function AppShell({ children, brand, nav = [], title, actions, renderLink, className }: AppShellProps) {
  const [navOpen, setNavOpen] = useState(false)
  return (
    <div className={cn("relative flex h-full w-full overflow-hidden bg-background text-foreground", className)}>
      <aside className="hidden shrink-0 lg:block">
        <Sidebar brand={brand} nav={nav} renderLink={renderLink} />
      </aside>

      {navOpen ? (
        <div className="absolute inset-0 z-50 lg:hidden">
          <div className="absolute inset-0 bg-black/50" onClick={() => setNavOpen(false)} />
          <div className="absolute inset-y-0 left-0 shadow-xl">
            <Sidebar brand={brand} nav={nav} renderLink={renderLink} onNavigate={() => setNavOpen(false)} />
          </div>
        </div>
      ) : null}

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4 sm:px-6">
          {nav.length ? (
            <button
              type="button"
              onClick={() => setNavOpen(true)}
              className="-ml-1 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground lg:hidden"
              aria-label="Open navigation"
            >
              <Menu className="size-5" />
            </button>
          ) : null}
          {title ? <div className="truncate text-sm font-medium">{title}</div> : null}
          {actions ? <div className="ml-auto flex items-center gap-2">{actions}</div> : null}
        </header>
        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">{children}</main>
      </div>
    </div>
  )
}
Installation
