'use client';
import { LayoutGrid, Activity, Settings, Undo2, Redo2, Palette, Compass } from '@lucide/icons';
import { useState } from 'react';
import { useMediaQuery } from '@fayegram-ai/faye-ui/hooks';
import { Tabs } from '@fayegram-ai/faye-ui/navigation/tabs';
import { Accordion } from '@fayegram-ai/faye-ui/navigation/accordion';
import { Collapsible } from '@fayegram-ai/faye-ui/navigation/collapsible';
import { Toolbar } from '@fayegram-ai/faye-ui/navigation/toolbar';
import { NavigationMenu } from '@fayegram-ai/faye-ui/navigation/navigation-menu';
import { Breadcrumbs } from '@fayegram-ai/faye-ui/navigation/breadcrumbs';
import { Pagination } from '@fayegram-ai/faye-ui/navigation/pagination';
import { Stepper } from '@fayegram-ai/faye-ui/navigation/stepper';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Section, Result } from '../example';
export default function Navigation() {
    const compact=useMediaQuery('(max-width:40rem)');
    const [page, setPage] = useState(1), [message, setMessage] = useState('Ready');
    return <><Section title="Accordion surfaces and indicators"><Accordion.Root>{(['divided','plain','outlined'] as const).map(variant=><Accordion.Item key={variant} value={variant} variants={{variant}}><Accordion.Header><Accordion.Trigger>{variant} with trailing chevron</Accordion.Trigger></Accordion.Header><Accordion.Panel>The end indicator rotates smoothly on open and close. Keyboard focus stays inside the trigger.</Accordion.Panel></Accordion.Item>)}<Accordion.Item value="leading" variants={{variant:'outlined'}}><Accordion.Header><Accordion.Trigger indicatorPosition="start">Optional leading indicator</Accordion.Trigger></Accordion.Header><Accordion.Panel>Indicator placement follows the writing direction. Custom artwork and hiding the indicator are also supported.</Accordion.Panel></Accordion.Item></Accordion.Root></Section><Section title="Tabs"><Tabs.Root defaultValue="overview"><Tabs.List aria-label="Project sections"><Tabs.Tab value="overview"><Icon icon={LayoutGrid} size="sm"/><span>Overview</span></Tabs.Tab><Tabs.Tab value="activity"><Icon icon={Activity} size="sm"/><span>Activity</span></Tabs.Tab><Tabs.Tab value="settings"><Icon icon={Settings} size="sm"/><span>Settings</span></Tabs.Tab><Tabs.Indicator /></Tabs.List><Tabs.Panel value="overview">Project summary with stable panel identity.</Tabs.Panel><Tabs.Panel value="activity">A locally rendered activity panel.</Tabs.Panel><Tabs.Panel value="settings">Workspace preferences.</Tabs.Panel></Tabs.Root></Section><Section title="Accordion and disclosure"><Accordion.Root><Accordion.Item value="tokens"><Accordion.Header><Accordion.Trigger>Why semantic tokens?</Accordion.Trigger></Accordion.Header><Accordion.Panel>They preserve meaning across color schemes and brands.</Accordion.Panel></Accordion.Item><Accordion.Item value="extensions"><Accordion.Header><Accordion.Trigger>Where do data engines live?</Accordion.Trigger></Accordion.Header><Accordion.Panel>In optional packages, never the core dependency graph.</Accordion.Panel></Accordion.Item></Accordion.Root><Collapsible.Root><Collapsible.Trigger render={<Button />}>Show implementation note</Collapsible.Trigger><Collapsible.Panel>Disclosure owns its state; motion respects reduced-motion preferences.</Collapsible.Panel></Collapsible.Root></Section><Section title="Toolbar and navigation menu"><Toolbar.Root aria-label="Document tools"><Toolbar.Group><Toolbar.Button onClick={() => setMessage('Undo selected')}><Icon icon={Undo2} size="sm"/><span>Undo</span></Toolbar.Button><Toolbar.Button onClick={() => setMessage('Redo selected')}><Icon icon={Redo2} size="sm"/><span>Redo</span></Toolbar.Button></Toolbar.Group><Toolbar.Separator /><Toolbar.Link href="/docs/theming/"><Icon icon={Palette} size="sm"/><span>Theming</span></Toolbar.Link><Toolbar.Input aria-label="Toolbar search" placeholder="Find in document"/></Toolbar.Root><NavigationMenu.Root><NavigationMenu.List><NavigationMenu.Item><NavigationMenu.Trigger><Icon icon={Compass} size="sm"/><span>Explore</span></NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href="/docs/theming/">Theme system</NavigationMenu.Link><NavigationMenu.Link href="/docs/layout/">Layout primitives</NavigationMenu.Link></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Portal><NavigationMenu.Positioner><NavigationMenu.Popup><NavigationMenu.Arrow/><NavigationMenu.Viewport /></NavigationMenu.Popup></NavigationMenu.Positioner></NavigationMenu.Portal></NavigationMenu.Root><Result>{message}</Result></Section><Section title="Location and progress"><Breadcrumbs items={[{ label: 'Documentation', href: '/docs/overview/' }, { label: 'Navigation' }]} /><Stepper steps={[{ key: 'details', label: 'Details', status: 'complete' }, { key: 'review', label: 'Review', status: 'current' }, { key: 'publish', label: 'Publish' }]}/><Pagination showFirst={!compact} showLast={!compact} siblings={compact?0:1} boundaries={compact?0:2} page={page} count={12} onPageChange={setPage}/><Result>Page {page} of 12</Result></Section></>;
}