use Lib\PHPXUI\{
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
    NavigationMenuTrigger,
    NavigationMenuContent,
    NavigationMenuLink,
    NavigationMenuListItem
};

use Lib\PPIcons\{
    CircleHelp,
    Circle,
    CircleCheck
};

<NavigationMenu viewport="{isMobile}">
    <NavigationMenuList class="flex-wrap">

        <NavigationMenuItem>
            <NavigationMenuTrigger>Home</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">

                    <li class="row-span-3">
                        <NavigationMenuLink asChild="true">
                            <a href="/"
                                class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6">
                                <div class="mb-2 text-lg font-medium sm:mt-4">shadcn/ui</div>
                                <p class="text-muted-foreground text-sm leading-tight">
                                    Beautifully designed components built with Tailwind CSS.
                                </p>
                            </a>
                        </NavigationMenuLink>
                    </li>

                    <NavigationMenuListItem
                        href="/docs"
                        title="Introduction">
                        Re-usable components built using Radix UI and Tailwind CSS.
                    </NavigationMenuListItem>

                    <NavigationMenuListItem
                        href="/docs/installation"
                        title="Installation">
                        How to install dependencies and structure your app.
                    </NavigationMenuListItem>

                    <NavigationMenuListItem
                        href="/docs/primitives/typography"
                        title="Typography">
                        Styles for headings, paragraphs, lists...etc
                    </NavigationMenuListItem>

                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>


        <NavigationMenuItem>
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                    <template pp-for="component in components">
                        <NavigationMenuListItem
                            href="{component.href}"
                            title="{component.title}">
                            {component.description}
                        </NavigationMenuListItem>
                    </template>
                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>


        <NavigationMenuItem>
            <NavigationMenuLink
                asChild="true"
                class="inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1">
                <a href="/docs">Docs</a>
            </NavigationMenuLink>
        </NavigationMenuItem>


        <NavigationMenuItem class="hidden md:block">
            <NavigationMenuTrigger>List</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid w-[300px] gap-4">
                    <li>
                        <NavigationMenuLink asChild="true">
                            <a href="#">
                                <div class="font-medium">Components</div>
                                <div class="text-muted-foreground">Browse all components in the library.</div>
                            </a>
                        </NavigationMenuLink>

                        <NavigationMenuLink asChild="true">
                            <a href="#">
                                <div class="font-medium">Documentation</div>
                                <div class="text-muted-foreground">Learn how to use the library.</div>
                            </a>
                        </NavigationMenuLink>

                        <NavigationMenuLink asChild="true">
                            <a href="#">
                                <div class="font-medium">Blog</div>
                                <div class="text-muted-foreground">Read our latest blog posts.</div>
                            </a>
                        </NavigationMenuLink>
                    </li>
                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>


        <NavigationMenuItem class="hidden md:block">
            <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid w-[200px] gap-4">
                    <li>
                        <NavigationMenuLink asChild="true"><a href="#">Components</a></NavigationMenuLink>
                        <NavigationMenuLink asChild="true"><a href="#">Documentation</a></NavigationMenuLink>
                        <NavigationMenuLink asChild="true"><a href="#">Blocks</a></NavigationMenuLink>
                    </li>
                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>


        <NavigationMenuItem class="hidden md:block">
            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
            <NavigationMenuContent>
                <ul class="grid w-[200px] gap-4">
                    <li>

                        <NavigationMenuLink asChild="true">
                            <a href="#" class="flex-row items-center gap-2">
                                <CircleHelp /> Backlog
                            </a>
                        </NavigationMenuLink>

                        <NavigationMenuLink asChild="true">
                            <a href="#" class="flex-row items-center gap-2">
                                <Circle /> To Do
                            </a>
                        </NavigationMenuLink>

                        <NavigationMenuLink asChild="true">
                            <a href="#" class="flex-row items-center gap-2">
                                <CircleCheck /> Done
                            </a>
                        </NavigationMenuLink>

                    </li>
                </ul>
            </NavigationMenuContent>
        </NavigationMenuItem>

    </NavigationMenuList>
</NavigationMenu>


<script>
const [isMobile, setIsMobile] = pp.state(false);

const [components] = pp.state([
    {
        title: "Alert Dialog",
        href: "/docs/primitives/alert-dialog",
        description: "A modal dialog that interrupts the user with important content and expects a response.",
    },
    {
        title: "Hover Card",
        href: "/docs/primitives/hover-card",
        description: "For sighted users to preview content available behind a link.",
    },
    {
        title: "Progress",
        href: "/docs/primitives/progress",
        description: "Displays an indicator showing completion progress of a task.",
    },
    {
        title: "Scroll-area",
        href: "/docs/primitives/scroll-area",
        description: "Visually or semantically separates content.",
    },
    {
        title: "Tabs",
        href: "/docs/primitives/tabs",
        description: "A set of layered content panels, one visible at a time.",
    },
    {
        title: "Tooltip",
        href: "/docs/primitives/tooltip",
        description: "A popup that displays information on hover or focus.",
    },
]);
</script>