---
import {
  getLocaleFromPath,
  localeLabels,
  localizedPath,
  stripLocalePrefix,
} from '@/i18n';
import Icon from './icons/Icon.astro';

const currentLocale = getLocaleFromPath(Astro.url.pathname);
const currentPath = stripLocalePrefix(Astro.url.pathname);
---

<div class="hs-dropdown relative inline-flex">
  <button
    id="hs-language-dropdown"
    type="button"
    aria-label="Sprache wechseln"
    title="Sprache wechseln"
    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 ring-zinc-500 outline-hidden transition duration-300 hover:bg-neutral-200 hover:text-orange-400 dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-hidden"
  >
    <Icon name="earth" />
    <span class="sr-only">{localeLabels[currentLocale]}</span>
    <svg
      class="hs-dropdown-open:rotate-180 size-4"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
    >
  </button>

  <div
    class="hs-dropdown-menu duration hs-dropdown-open:opacity-100 top-[98%]! left-[20%]! mt-2 hidden transform-none! rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] before:absolute before:start-0 before:-top-4 before:h-4 before:w-full after:absolute after:start-0 after:-bottom-4 after:h-4 after:w-full md:top-[80%]! md:left-[90%]! dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
    aria-labelledby="hs-language-dropdown"
  >
    {
      Object.entries(localeLabels).map(([locale, label]) => (
        <a
          class:list={[
            'flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700',
            locale === currentLocale
              ? 'font-semibold text-orange-500 dark:text-orange-300'
              : 'text-neutral-800 dark:text-neutral-400',
          ]}
          href={localizedPath(currentPath, locale as 'de' | 'en')}
          aria-current={locale === currentLocale ? 'true' : undefined}
        >
          {label}
        </a>
      ))
    }
  </div>
</div>