<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>
export default {
  name: 'KoleThemeSwitcher',
  props: {
    mode: { type: String, default: 'light' },
    brand: { type: String, default: '#2F54EB' }
  },
  data() {
    return {
      modes: [
        { value: 'light', label: '日间' },
        { value: 'dark', label: '夜间' },
        { value: 'auto', label: '自动' }
      ],
      brands: ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96']
    };
  }
};
</script>

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