---
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";

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

const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
---

{
  /* ------------------------------------------- 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
            class:list={{ current: id === currentLang }}
            href={getPartialUrl(id)}
          >
            {formatLocale(id)}
          </MasoActor>
        ))
      }
    </div>
  </Tooltip>
  <p class="high-contrast-text">
    This content is available is {availableLanguages.length} languages.
  </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>