<script setup lang="ts">
import { useThemeStore } from '@/stores/theme';
import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
import { NIcon, NSwitch } from 'naive-ui';
import { storeToRefs } from 'pinia';

const themeStore = useThemeStore();
const { darkThemeEnabled } = storeToRefs(themeStore);
</script>

<template>
  <NSwitch v-model:value="darkThemeEnabled" size="small">
    <template #unchecked-icon>
      <NIcon :component="SunnyOutline" />
    </template>
    <template #checked-icon>
      <NIcon :component="MoonOutline" />
    </template>
  </NSwitch>
</template>

<style scoped></style>