component LanguageSwitcher {
  outputs {
    change(payload: { locale: string })
  }
  props {
    locales: unknown[] = []
    current: string = "en"
    label: string = "Language"
    placeholder: string = "Choose language"
    helperText: string = ""
    variant: string = "select"
    compact: boolean = false
    responsive: boolean = true
    fullWidth: boolean = false
    showLabel: boolean = true
    showHelper: boolean = true
    icon: string = "icon-[lucide--languages]"
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }
  functions {
    client function changed(sourceEvent) {
      output.change({ locale: sourceEvent.currentTarget.value })
    }
    client function selected(locale, sourceEvent) {
      output.change({ locale: locale })
    }
  }
  view {
    <div
      {...attrs}
      class='wire-language-switcher {fullWidth ? "wire-language-switcher--full" : ""} {responsive ? "wire-language-switcher--responsive" : ""} {compact || variant == "compact" ? "wire-language-switcher--compact" : ""} {class}'
      data-color='{color}'
      data-size='{size}'
      data-variant='{variant}'
      data-current-language='{current}'
    >
      {#if variant == "segmented"}
        <fieldset class="wire-language-switcher__fieldset">
          {#if showLabel}<legend class="wire-language-switcher__label">{label}</legend>{/if}
          <div class="wire-language-switcher__segments" role="group" aria-label='{label}'>
            {#each locales as locale}
              <button
                type="button"
                class="wire-language-switcher__segment"
                data-wire-lang-set='{locale.value}'
                aria-pressed='{locale.value == current}'
                disabled='{locale.disabled}'
                @click='selected(locale.value, event)'
              ><span class="wire-language-switcher__long-label">{locale.label}</span><span class="wire-language-switcher__short-label">{locale.shortLabel}</span></button>
            {/each}
          </div>
          {#if showHelper && helperText}<span class="wire-language-switcher__helper">{helperText}</span>{/if}
        </fieldset>
      {/if}
      {#if variant != "segmented"}
        <label class="wire-language-switcher__field">
          {#if showLabel}<span class="wire-language-switcher__label">{label}</span>{/if}
          <span class="wire-language-switcher__control">
            {#if icon}<span class='{icon} wire-language-switcher__icon' aria-hidden="true"></span>{/if}
            <select
              data-wire-lang
              name="language"
              aria-label='{label}'
              class="wire-language-switcher__select"
              @change='changed(event)'
            >
              {#if placeholder}<option value="" disabled selected='{current == ""}'>{placeholder}</option>{/if}
              {#each locales as locale}<option value='{locale.value}' selected='{locale.value == current}' disabled='{locale.disabled}' data-wire-lang-option data-label-long='{locale.label}' data-label-short='{locale.shortLabel}'>{locale.label}</option>{/each}
            </select>
            <span class="icon-[lucide--chevron-down] wire-language-switcher__chevron" aria-hidden="true"></span>
          </span>
          {#if showHelper && helperText}<span class="wire-language-switcher__helper">{helperText}</span>{/if}
        </label>
      {/if}
    </div>
  }

  style {
    .wire-language-switcher { min-width: 13rem; color: var(--wire-color-text); }
    .wire-language-switcher--full, .wire-language-switcher--full .wire-language-switcher__field { width: 100%; }
    .wire-language-switcher__field, .wire-language-switcher__fieldset { display: flex; margin: 0; padding: 0; border: 0; flex-direction: column; gap: .4rem; }
    .wire-language-switcher__label { padding: 0; font-size: .8125rem; line-height: 1.2; font-weight: 650; color: var(--wire-color-text); }
    .wire-language-switcher__control { position: relative; display: flex; align-items: center; }
    .wire-language-switcher__select { width: 100%; min-height: 2.75rem; appearance: none; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-lg); background: var(--wire-color-surface); padding: .65rem 2.5rem .65rem 2.35rem; color: var(--wire-color-text); font: inherit; font-size: .875rem; font-weight: 550; box-shadow: 0 1px 2px color-mix(in srgb, var(--wire-color-text) 7%, transparent); outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
    .wire-language-switcher__select:hover { border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); }
    .wire-language-switcher__select:focus-visible { border-color: var(--wire-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 18%, transparent); }
    .wire-language-switcher__icon, .wire-language-switcher__chevron { position: absolute; z-index: 1; width: 1rem; height: 1rem; pointer-events: none; color: var(--wire-color-muted); }
    .wire-language-switcher__icon { left: .8rem; }
    .wire-language-switcher__chevron { right: .8rem; }
    .wire-language-switcher__helper { font-size: .72rem; line-height: 1.35; color: var(--wire-color-muted); }
    .wire-language-switcher--compact { min-width: 0; }
    .wire-language-switcher--compact .wire-language-switcher__label, .wire-language-switcher--compact .wire-language-switcher__helper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .wire-language-switcher--compact .wire-language-switcher__select { min-height: 2.25rem; border-radius: 999px; padding-top: .4rem; padding-bottom: .4rem; }
    .wire-language-switcher__segments { display: inline-flex; flex-wrap: wrap; gap: .25rem; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-xl); background: var(--wire-color-surface-2); padding: .25rem; }
    .wire-language-switcher__segment { min-height: 2.25rem; border: 0; border-radius: var(--wire-radius-lg); background: transparent; padding: .45rem .8rem; color: var(--wire-color-muted); font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
    .wire-language-switcher__segment:hover { color: var(--wire-color-text); }
    .wire-language-switcher__segment[aria-pressed="true"] { background: var(--wire-color-surface); color: var(--wire-color-primary); box-shadow: 0 1px 3px color-mix(in srgb, var(--wire-color-text) 12%, transparent); }
    .wire-language-switcher__segment:focus-visible { outline: 2px solid var(--wire-color-primary); outline-offset: 2px; }
    .wire-language-switcher__short-label { display: none; }
    @media (max-width: 640px) { .wire-language-switcher--responsive { width: 100%; min-width: 0; } .wire-language-switcher--responsive .wire-language-switcher__segments { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); } .wire-language-switcher--responsive .wire-language-switcher__long-label { display: none; } .wire-language-switcher--responsive .wire-language-switcher__short-label { display: inline; } }
    @media (prefers-reduced-motion: reduce) { .wire-language-switcher__select, .wire-language-switcher__segment { transition: none; } }
  }
}