component PreferenceSwitcher {
  props {
    @event theme = function
    @event color = function
    @event language = function
    size = "default"
    color = "primary"
    themeLabel = "Theme"
    colorLabel = "Accent color"
    languageLabel = "Language"
    languages = [
      {"label": "English", "shortLabel": "EN", "value": "en"},
      {"label": "हिन्दी", "shortLabel": "हि", "value": "hi"},
      {"label": "मराठी", "shortLabel": "म", "value": "mr"}
    ]
    colors = [
      {"label": "Blue", "value": "blue", "hex": "#2563eb"},
      {"label": "Cyan", "value": "cyan", "hex": "#0891b2"},
      {"label": "Emerald", "value": "emerald", "hex": "#059669"},
      {"label": "Violet", "value": "violet", "hex": "#7c3aed"},
      {"label": "Rose", "value": "rose", "hex": "#e11d48"},
      {"label": "Amber", "value": "amber", "hex": "#d97706"}
    ]
    compact = true
    class = ""
  }

  functions {
    function choose(type, value) {
      $emit(type, { value: value })
    }
  }

  view {
    <div class="wire-preferences wire-next--color-{color} wire-next--size-{size} {compact ? 'wire-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
      <details class="wire-preferences__menu" name="wire-preference-menu">
        <summary aria-label="{themeLabel}" title="{themeLabel}">
          <span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
          {#if !compact}<span>{themeLabel}</span>{/if}
        </summary>
        <div class="wire-preferences__panel">
          <strong>{themeLabel}</strong>
          <div class="wire-preferences__options">
            <button type="button" data-wire-theme-set="light" @click="choose('theme', 'light')"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
            <button type="button" data-wire-theme-set="dark" @click="choose('theme', 'dark')"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
          </div>
        </div>
      </details>

      <details class="wire-preferences__menu" name="wire-preference-menu">
        <summary aria-label="{colorLabel}" title="{colorLabel}">
          <span class="icon-[lucide--palette]" aria-hidden="true"></span>
          {#if !compact}<span>{colorLabel}</span>{/if}
        </summary>
        <div class="wire-preferences__panel wire-preferences__panel--colors">
          <strong>{colorLabel}</strong>
          <div class="wire-preferences__swatches">
            {#each colors as item}
              <button type="button" data-wire-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wire-preference-swatch: {item.hex}" @click="choose('color', item.value)"></button>
            {/each}
          </div>
        </div>
      </details>

      <details class="wire-preferences__menu wire-preferences__menu--language" name="wire-preference-menu">
        <summary aria-label="{languageLabel}" title="{languageLabel}">
          <span class="icon-[lucide--languages]" aria-hidden="true"></span>
          <span class="wire-preferences__current-language" aria-hidden="true">EN</span>
          {#if !compact}<span>{languageLabel}</span>{/if}
        </summary>
        <div class="wire-preferences__panel wire-preferences__panel--language">
          <strong>{languageLabel}</strong>
          {#each languages as item}
            <button type="button" data-wire-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)">
              <span>{item.shortLabel}</span>{item.label}
            </button>
          {/each}
        </div>
      </details>
    </div>
  }
}