---
import { ModeToggle } from '@/components/ui/mode-toggle'
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import MobileMenu from '@components/ui/mobile-menu'
import { NAV_LINKS, SITE } from '@consts'
import { Image } from 'astro:assets'
import logo from '../../public/static/logo.svg'
---

<header
  class="sticky top-0 z-10 bg-background/50 backdrop-blur-md"
  transition:persist
>
  <Container>
    <div class="flex flex-wrap items-center justify-between gap-4 py-4">
      <Link
        href="/"
        class="flex flex-shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
      >
        <Image src={logo} alt="Logo" class="size-8" />
        {SITE.TITLE}
      </Link>
      <div class="flex items-center gap-2 md:gap-4">
        <nav class="hidden items-center gap-4 text-sm sm:gap-6 md:flex">
          {
            NAV_LINKS.map((item) => (
              <Link
                href={item.href}
                class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
              >
                {item.label}
              </Link>
            ))
          }
        </nav>
        <MobileMenu client:load transition:persist />
        <ModeToggle client:load transition:persist />
      </div>
    </div>
  </Container>
</header>