<script lang="ts">
  import { languageStore } from '$lib/stores/language.svelte';
  import { languages } from '$lib/i18n/translations';
  import Dropdown from '$lib/components/ui/Dropdown.svelte';
  import { Languages } from '@lucide/svelte';

  let { color }: { color?: string | null } = $props();

  const languageItems = $derived(
    languages.map((lang) => ({
      value: lang.code,
      label: lang.name
    }))
  );

  function setLanguage(code: string) {
    languageStore.setLanguage(code as 'en' | 'da');
  }
</script>

<Dropdown
  items={languageItems}
  selectedValue={languageStore.current}
  onSelect={setLanguage}
  {color}
  showCheckmark={false}
  ariaLabel="Toggle language"
>
  {#snippet icon()}
    <Languages class="h-[1.2rem] w-[1.2rem]" />
  {/snippet}
</Dropdown>
