<!-- #region LanguageSwitcher [C:1] [TYPE Component] [SEMANTICS i18n, locale, switcher, language, atom] -->
<!-- @BRIEF Language switcher dropdown for i18n locale selection. -->
<!-- @LAYER UI -->
<!--
@SEMANTICS: language-switcher, i18n-ui, ui-atom
@PURPOSE:   Dropdown component to switch between supported languages.
@LAYER     Atom
@RELATION  BINDS_TO -> [EXT:frontend:i18n.locale]
@RELATION  DEPENDS_ON -> [Select]

@UX_STATE: Idle -> Active locale is shown in the compact selector.
@UX_STATE: Switching -> Bound locale updates immediately after selection.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { locale } from "$lib/i18n/index.svelte.js";
  import Select from "./Select.svelte";
  // [/SECTION: IMPORTS]

  const options = [
    { value: "ru", label: "Русский" },
    { value: "en", label: "English" },
  ];
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="w-32">
  <Select bind:value={$locale} {options} />
</div>
<!-- [/SECTION: TEMPLATE] -->

<!-- #endregion LanguageSwitcher -->
