<script lang="ts" setup>
import { useL10n } from '@KTXC'
import type { ThemerMode } from '@/types'

defineProps<{
  modelValue: ThemerMode
  disabled?: boolean
}>()

const emit = defineEmits<{
  (event: 'update:modelValue', value: ThemerMode): void
}>()

const { t } = useL10n('themer')

const modes: Array<{ value: ThemerMode; icon: string; l10n: string; label: string }> = [
  { value: 'light', icon: 'mdi-weather-sunny', l10n: 'mode.light', label: 'Light' },
  { value: 'dark', icon: 'mdi-weather-night', l10n: 'mode.dark', label: 'Dark' },
  { value: 'system', icon: 'mdi-theme-light-dark', l10n: 'mode.system', label: 'System' },
]
</script>

<template>
  <VBtnToggle
    :model-value="modelValue"
    :disabled="disabled"
    mandatory
    divided
    variant="outlined"
    color="primary"
    @update:model-value="emit('update:modelValue', $event as ThemerMode)"
  >
    <VBtn
      v-for="mode in modes"
      :key="mode.value"
      :value="mode.value"
      :prepend-icon="mode.icon"
    >
      {{ t(mode.l10n, mode.label) }}
    </VBtn>
  </VBtnToggle>
</template>
