<script setup lang="ts">
import { useTheme } from '~/composables/useTheme'
const { theme, toggleTheme } = useTheme()
</script>

<template>
  <button
    @click="toggleTheme"
    class="ml-2 rounded border px-2 py-1 text-sm"
    :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
  >
    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
  </button>
</template>
