<template>
  <div class="kole-themesw" role="radiogroup" aria-label="主题模式">
    <div
      v-for="m in modes"
      :key="m.value"
      class="kole-themesw-opt"
      role="radio"
      tabindex="0"
      :aria-checked="mode === m.value"
      :class="{ 'is-active': mode === m.value }"
      @keydown.enter="emit('update:mode', m.value)"
      @keydown.space.prevent="emit('update:mode', m.value)"
      @click="emit('update:mode', m.value)"
    >
      <span class="kole-themesw-dot" :class="m.value"></span>{{ m.label }}
    </div>
    <div class="kole-themesw-colors">
      <span
        v-for="c in brands"
        :key="c"
        class="kole-themesw-color"
        role="radio"
        :aria-label="'品牌色 ' + c"
        tabindex="0"
        :aria-checked="brand === c"
        :class="{ 'is-active': brand === c }"
        :style="{ background: c }"
        @keydown.enter="emit('update:brand', c)"
        @keydown.space.prevent="emit('update:brand', c)"
        @click="emit('update:brand', c)"
      ></span>
    </div>
    <div class="kole-themesw-label">品牌色：{{ brand }}（应用于 Kole 品牌令牌实时预览）</div>
  </div>
</template>

<script setup>
defineProps({
  mode: { type: String, default: 'light' },
  brand: { type: String, default: '#2F54EB' }
});
const emit = defineEmits(['update:mode', 'update:brand']);
const modes = [
  { value: 'light', label: '日间' },
  { value: 'dark', label: '夜间' },
  { value: 'auto', label: '自动' }
];
const brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];
</script>

<style src="./ThemeSwitcher.css"></style>
