---
import type { Locale } from "../lib/i18n";
import { preserveQuery } from "../lib/cta";

interface Props {
  locale: Locale;
  search?: string;
}

const { locale, search = "" } = Astro.props;
const items: { code: Locale; label: string }[] = [
  { code: "en", label: "EN" },
  { code: "si", label: "සිංහල" },
  { code: "ta", label: "தமிழ்" },
];
---

<nav class="flex items-center gap-2 text-sm text-[var(--color-muted)]" aria-label="Language">
  {
    items.map((item) => (
      <a
        href={preserveQuery(`/${item.code}/`, search)}
        class:list={[
          "lang-link rounded px-1.5 py-0.5 transition-colors",
          item.code === locale
            ? "font-bold text-[var(--color-ink)]"
            : "hover:text-[var(--color-ink)]",
        ]}
        data-lang={item.code}
        hreflang={item.code}
        aria-current={item.code === locale ? "page" : undefined}
      >
        {item.label}
      </a>
    ))
  }
</nav>