import {
  NavRailProvider,
  NavRail,
  NavRailHeader,
  NavRailFooter,
  NavRailItem,
  NavRailContent,
  NavPanel,
  NavPanelHeader,
  NavPanelContent,
  AppLayout,
  AppLayoutContent,
  NavRailTrigger,
} from '@parto-system-design/ui'
import { LayoutDashboard, Search, Settings } from 'lucide-react'

export default function MyApp() {
  return (
    <NavRailProvider defaultActiveItem="dashboard" defaultPanelOpen>
      <AppLayout>
        <NavRail>
          <NavRailHeader>
            <Logo />
          </NavRailHeader>
          <NavRailContent>
            <NavRailItem itemId="dashboard" icon={<LayoutDashboard />} label="داشبورد" />
            <NavRailItem itemId="search" icon={<Search />} label="جستجو" />
          </NavRailContent>
          <NavRailFooter>
            <NavRailItem itemId="settings" icon={<Settings />} label="تنظیمات" />
          </NavRailFooter>
        </NavRail>

        <NavPanel forItem="dashboard">
          <NavPanelHeader title="داشبورد" />
          <NavPanelContent>{/* ساب‌ناوبری داشبورد */}</NavPanelContent>
        </NavPanel>

        <NavPanel forItem="search">
          <NavPanelHeader title="جستجو" />
          <NavPanelContent>{/* فیلترهای جستجو */}</NavPanelContent>
        </NavPanel>

        <AppLayoutContent>{/* محتوای صفحه */}</AppLayoutContent>
      </AppLayout>
    </NavRailProvider>
  )
}

const [activeItem, setActiveItem] = React.useState('dashboard')
const [panelOpen, setPanelOpen] = React.useState(true)

<NavRailProvider
  activeItem={activeItem}
  onActiveItemChange={setActiveItem}
  panelOpen={panelOpen}
  onPanelOpenChange={setPanelOpen}
>
  {/* ... */}
</NavRailProvider>

<NavPanel forItem="dashboard">
  <NavPanelHeader title="داشبورد" />
  <NavPanelContent>
    <SidebarProvider defaultOpen>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton isActive>نمای کلی</SidebarMenuButton>
        </SidebarMenuItem>
        <SidebarMenuItem>
          <SidebarMenuButton>شاخص‌ها</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarProvider>
  </NavPanelContent>
</NavPanel>

<AppBar
  logo={
    <>
      <NavRailTrigger />
      <span>برنامه من</span>
    </>
  }
/>