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

const items = [
  { href: '/blog', label: 'blog' },
  { href: '/authors', label: 'authors' },
  { href: '/about', label: 'about' },
]
---

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