---
import { LANGUAGES, DEFAULT_LANG } from "../i18n/config";
const defaultLang = LANGUAGES.find(l => l.code === DEFAULT_LANG)!;
---
<div class="lang-switcher" data-open="false">
  <button
    type="button"
    class="lang-btn"
    aria-haspopup="listbox"
    aria-expanded="false"
    data-i18n-attr="aria-label:common.select_language"
    aria-label="Select language"
  >
    <span class="flag" data-lang-current-flag>{defaultLang.flag}</span>
    <span class="native" data-lang-current-name>{defaultLang.nativeName}</span>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
      <path d="M6 9l6 6 6-6" />
    </svg>
  </button>
  <div class="lang-menu" role="listbox">
    {LANGUAGES.map(lang => (
      <button
        type="button"
        class="lang-item"
        role="option"
        aria-current={lang.code === DEFAULT_LANG ? "true" : "false"}
        data-lang-option={lang.code}
      >
        <span class="flag" aria-hidden="true">{lang.flag}</span>
        <span class="native" lang={lang.code}>{lang.nativeName}</span>
        <span class="english">{lang.englishName}</span>
      </button>
    ))}
  </div>
</div>