LanguagePicker.astro

---
import { i18n } from 'astro:config/client'
import { texts } from '../i18n/components/LanguagePicker'

// Idiomas disponibles
const languages = i18n.locales as string[]

interface Props {
  variant?: 'desktop' | 'mobile'
  lang: string
}

const { variant = 'desktop', lang } = Astro.props

// Idioma actual detectado desde la URL
const pathname = Astro.url.pathname
const currentLang = lang || pathname.split('/')[1] || i18n.defaultLocale
const t = texts[currentLang as keyof typeof texts] || texts['es']

// Función para construir la URL destino
const getPathForLang = (targetLang: string) => {
  const parts = pathname.split('/').filter(Boolean)

  // Si ya hay idioma, lo reemplaza
  if (languages.some((l) => l === parts[0])) {
    parts[0] = targetLang
  } else {
    parts.unshift(targetLang)
  }

  return '/' + parts.join('/')
}
---

{
  variant === 'desktop' ? (
    <div
      class="lang-picker flex items-center gap-1 border-l border-pycon-black/20 dark:border-white/20 pl-6 ml-2 text-pycon-orange-100 text-lg font-outfit"
      role="group"
      aria-label={t['alttext']}
    >
      {languages.map((lang) => (
        <a
          href={getPathForLang(lang)}
          hreflang={lang}
          aria-label={t['labelariadesc'][lang]}
          lang={lang}
          aria-current={lang === currentLang ? 'page' : undefined}
          class:list={[
            'px-2 py-1 text-sm font-outfit rounded transition-colors outline-none',
            lang === currentLang
              ? 'text-pycon-red-100 font-bold underline'
              : 'text-pycon-orange hover:text-pycon-black dark:hover:text-white focus-visible:text-pycon-red-75',
          ]}
        >
          {t.label[lang as keyof typeof t.label]}
        </a>
      ))}
    </div>
  ) : (
    <div
      class="lang-picker-mobile border-t border-pycon-black/10 dark:border-white/10 pt-4 mt-2"
      role="group"
      aria-label={t['alttext']}
    >
      <span class="text-slate-500 text-sm font-medium mb-2 block">Idioma</span>
      <div class="flex gap-2">
        {languages.map((lang) => (
          <a
            href={getPathForLang(lang)}
            hreflang={lang}
            lang={lang}
            aria-current={lang === currentLang ? 'page' : undefined}
            aria-label={t['labelariadesc'][lang as keyof typeof t.labelariadesc]}
            class:list={[
              'px-3 py-2 text-sm font-outfit rounded transition-colors outline-none',
              lang === currentLang
                ? 'bg-pycon-orange text-white font-bold'
                : 'bg-pycon-black/5 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:bg-pycon-black/10 dark:hover:bg-white/10 focus-visible:bg-pycon-orange focus-visible:text-white',
            ]}
          >
            {t.label[lang as keyof typeof t.label]}
          </a>
        ))}
      </div>
    </div>
  )
}
<style>
  /* Underline on hover/focus for language links */
  .lang-picker a:where(:hover, :focus-visible):not([aria-current='page']),
  .lang-picker-mobile a:where(:hover, :focus-visible):not([aria-current='page']) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
</style>