---
import Container from "@/components/Container.astro";
import Link from "@/components/Link.astro";
import { ModeToggle } from "@/components/ui/mode-toggle";
import { SITE } from "@/consts";
---

<header
  class="bg-background/50 sticky top-0 z-10 backdrop-blur-md"
  transition:persist
>
  <Container>
    <div class="flex flex-wrap items-center justify-between gap-4 py-4">
      <Link
        href="/"
        class="hover:text-muted-foreground text-primary text-xl font-medium"
      >
        {SITE.title}
      </Link>
      <div class="flex items-center gap-2 md:gap-4">
        <ModeToggle client:load transition:persist />
      </div>
    </div>
  </Container>
</header>