<script setup lang="ts">
import { useTheme, THEMES } from '../composables/useTheme';
import SwitcherDropdown from './SwitcherDropdown.vue';

const { currentTheme, setTheme } = useTheme();
</script>

<template>
  <SwitcherDropdown
    v-model="currentTheme"
    :options="THEMES"
    title="切换主题"
    @update:model-value="(id: string) => setTheme(id as any)"
  >
    <!-- 默认图标：太阳/调色板 -->
    <template #icon>
      <slot name="icon">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
          <path
            d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
          />
        </svg>
      </slot>
    </template>
    <!-- 透传 option 插槽 -->
    <template v-if="$slots['option']" #option="slotProps">
      <slot name="option" v-bind="slotProps" />
    </template>
  </SwitcherDropdown>
</template>