---
import { Rss } from "lucide-react"
import { LanguageToggle } from "~/components/react/language-toggle"
import { ThemeToggle } from "~/components/react/theme-toggle"
import { en, zh } from "~/config"
import { getLangFromUrl } from "~/i18n/utils"

const lang = getLangFromUrl(Astro.url)
const config = lang === "zh" ? zh : en
---

<header class="flex h-24 w-full items-center justify-between">
  <a href="/" data-umami-event="site-name">
    <div class="text-2xl font-semibold">{config.siteName}</div>
  </a>

  <div class="flex items-center gap-6">
    {
      config.rss && (
        <a href="/atom.xml" target="_blank" data-umami-event="rss">
          <Rss />
        </a>
      )
    }
    {
      config.social.map((social) => (
        <a
          href={social.link}
          target="_blank"
          class="hidden md:block"
          data-umami-event={social.label}
        >
          <social.icon />
        </a>
      ))
    }

    <LanguageToggle client:load />
    <ThemeToggle client:load />
  </div>
</header>
