<script setup lang="ts">
import { Icon } from '@iconify/vue'

const colorMode = useColorMode()

const modes = ['light', 'dark', 'system'] as const
type Mode = typeof modes[number]

const iconMap: Record<Mode, string> = {
  light: 'mdi:weather-sunny',
  dark: 'mdi:weather-night',
  system: 'mdi:monitor',
}

const labelMap: Record<Mode, string> = {
  light: '浅色模式',
  dark: '深色模式',
  system: '跟随系统',
}

const currentMode = computed(() => colorMode.preference as Mode)
const currentIcon = computed(() => iconMap[currentMode.value] || iconMap.system)
const currentLabel = computed(() => labelMap[currentMode.value] || labelMap.system)

function cycle() {
  const idx = modes.indexOf(currentMode.value)
  colorMode.preference = modes[(idx + 1) % modes.length]
}
</script>

<template>
  <button
    @click="cycle"
    class="inline-flex items-center justify-center rounded-md w-8 h-8 transition-colors"
    style="color: var(--color-text-secondary)"
    :class="[
      'hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text)]',
    ]"
    :aria-label="currentLabel"
    :title="currentLabel"
  >
    <Icon :icon="currentIcon" class="w-5 h-5" />
  </button>
</template>
