// Example: wiring the shell in a plain React app (router-agnostic).
// In Next.js, pass `activePath={usePathname()}` and a Link adapter:
//   LinkComponent={({ href, ...p }) => <Link href={href} {...p} />}
import { useState } from "react"
import { Inbox, LayoutDashboard, Settings } from "lucide-react"

import { AppShellSidebar } from "@/components/widgets/app-shell/AppShell"
import type { NavigationItem } from "@/components/widgets/app-shell/AppShell.types"

const navigation: NavigationItem[] = [
  {
    label: "Dashboard",
    collapsedLabel: "Home",
    href: "#/dashboard",
    icon: LayoutDashboard,
  },
  { label: "Signal Feed", collapsedLabel: "Feed", href: "#/feed", icon: Inbox },
  { label: "Settings", href: "#/settings", icon: Settings, section: "bottom" },
]

export default function Example() {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <div className="flex h-[480px] overflow-hidden rounded-lg border border-border [&_aside]:!flex [&_aside]:h-full">
      <AppShellSidebar
        navigationItems={navigation}
        activePath="#/feed"
        brand={
          <div className="flex items-center gap-2">
            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
              A
            </span>
            <span className="text-lg font-semibold text-sidebar-foreground">
              Acme Ops
            </span>
          </div>
        }
        isCollapsed={collapsed}
        onCollapsedChange={setCollapsed}
      />
      <main className="flex-1 bg-background p-6 text-sm text-muted-foreground">
        Route content renders here.
      </main>
    </div>
  )
}