import { useState } from "react"
import { Inbox, LayoutDashboard, Settings } from "lucide-react"

import { AppLayout } from "@/components/widgets/app-layout/AppLayout"
import type { AppLayoutNavItem } from "@/components/widgets/app-layout/AppLayout.types"

const navigationItems: AppLayoutNavItem[] = [
  {
    id: "dashboard",
    label: "Dashboard",
    collapsedLabel: "Home",
    href: "#/dashboard",
    icon: LayoutDashboard,
    active: true,
  },
  {
    id: "feed",
    label: "Signal Feed",
    collapsedLabel: "Feed",
    href: "#/feed",
    icon: Inbox,
  },
  {
    id: "settings",
    label: "Settings",
    href: "#/settings",
    icon: Settings,
    section: "bottom",
  },
]

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

  return (
    <AppLayout
      navigationItems={navigationItems}
      logo={
        <span className="text-lg font-semibold text-sidebar-foreground">
          Acme Ops
        </span>
      }
      header={<span className="text-sm font-medium">Dashboard</span>}
      isSidebarCollapsed={collapsed}
      onSidebarCollapsedChange={setCollapsed}
    >
      <p className="text-sm text-muted-foreground">
        Route content renders here.
      </p>
    </AppLayout>
  )
}