<script setup lang="ts">
import { useTheme } from "@/stores/theme"

const { mode, toggle } = useTheme()
</script>

<template>
  <button
    type="button"
    class="cursor-pointer rounded-md border border-border bg-surface-alt p-2 text-foreground hover:bg-border transition-colours"
    :aria-label="mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
    @click="toggle">
    <span v-if="mode === 'dark'" aria-hidden="true">☀️</span>
    <span v-else aria-hidden="true">🌙</span>
  </button>
</template>
