---
import MasoActor from "components/Maso/MasoActor.astro";
import Tooltip from "components/Tooltip.astro";
import Button from "components/Button.astro";
import { formatLocale } from "src/utils/format";
import { getI18n } from "src/i18n/i18n";

interface Props {
  currentLang: string;
  getPartialUrl: (locale: string) => string;
  availableLanguages: string[];
}

const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
const { t } = await getI18n(Astro.locals.currentLocale);
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<div id="lang-selector" class="when-js when-no-print">
  <Tooltip trigger="click">
    <Button icon="material-symbols:translate" title={currentLang.toUpperCase()} />

    <div id="tooltip-content" slot="tooltip-content">
      {
        availableLanguages.map((id) => (
          <MasoActor href={getPartialUrl(id)}>
            <p class:list={{ current: id === currentLang, "pressable-link": true }}>
              {formatLocale(id)}
            </p>
          </MasoActor>
        ))
      }
    </div>
  </Tooltip>
  <p class="high-contrast-text">
    {
      t("global.languageOverride.availableLanguages", {
        count: availableLanguages.length,
      })
    }
  </p>
</div>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  #lang-selector {
    display: flex;
    align-items: center;
    gap: 1em;

    #tooltip-content {
      display: grid;
      gap: 0.5em;

      & .current {
        color: var(--color-base-750);
        text-decoration: underline 0.08em var(--color-base-650);
      }
    }
  }
</style>