<template>
  <div class="flex justify-center">
    <div class="kra-theme-mode-selector">
      <div
        v-for="mode in themeModes"
        :key="mode.value"
        class="kra-theme-mode-item"
        :class="[
          modelValue === mode.value
            ? 'text-white shadow-sm transform -translate-y-0.5'
            : 'text-muted-foreground hover:text-base-text hover:bg-muted'
        ]"
        :style="modelValue === mode.value ? { backgroundColor: primaryColor } : {}"
        @click="handleModeChange(mode.value)"
      >
        <el-icon class="text-lg mb-1">
          <component :is="mode.icon" />
        </el-icon>
        <span class="text-xs font-medium">{{ mode.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { Sunny, Moon, Monitor } from '@element-plus/icons-vue'
import { useThemeStore } from '@/pinia'

defineOptions({
  name: 'ThemeModeSelector'
})

defineProps({
  modelValue: {
    type: String,
    default: 'auto'
  }
})

const emit = defineEmits(['update:modelValue'])

const themeStore = useThemeStore()
const { settings } = storeToRefs(themeStore)

const primaryColor = computed(() => settings.value.themeColor)

const themeModes = [
  {
    value: 'light',
    label: '浅色',
    icon: Sunny
  },
  {
    value: 'dark',
    label: '深色',
    icon: Moon
  },
  {
    value: 'auto',
    label: '跟随系统',
    icon: Monitor
  }
]

const handleModeChange = (mode) => {
  emit('update:modelValue', mode)
}
</script>
