---
import logo from "@/assets/logo.png";
import { Image } from "astro:assets";
import { navItems } from "@/utils/nav-links";
import MobileMenu from "@/components/mobile-menu";
import LinkButton from "@/components/link-button";
---

<nav
    class="py-2 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg"
>
    <div
        class="px-4 flex w-full max-w-[65ch] items-center justify-between mx-auto"
    >
        <section class="flex max-w-max">
            <LinkButton
                href="/"
                size="icon"
                variant="link"
                className="rounded-full px-0"
            >
                <Image
                    src={logo}
                    width={80}
                    height={80}
                    loading="eager"
                    class="w-auto h-auto"
                    alt="juancmandev logo"
                />
            </LinkButton>
        </section>
        <section class="hidden items-center md:flex">
            <ul class="flex items-center gap-1">
                {
                    navItems.map((navItem: any) => (
                        <li class="w-max h-max">
                            <LinkButton
                                variant="link"
                                className="px-2"
                                href={navItem.to}
                            >
                                {navItem.label}
                            </LinkButton>
                        </li>
                    ))
                }
            </ul>
        </section>
        <section class="flex h-max items-center md:hidden">
            <MobileMenu client:idle />
        </section>
    </div>
</nav>
