<script setup lang="ts">
import { useTheme } from '../lib/theme'

const { mode, labels, cycle } = useTheme()
const icons = { auto: '🌗', dark: '🌙', light: '☀️' } as const
</script>

<template>
  <button
    class="btn btn-sm theme-toggle"
    type="button"
    :title="`Design: ${labels[mode]} – klicken zum Wechseln`"
    :aria-label="`Design umschalten, aktuell ${labels[mode]}`"
    @click="cycle"
  >
    <span aria-hidden="true">{{ icons[mode] }}</span>
    <span class="tlabel">{{ labels[mode] }}</span>
  </button>
</template>

<style scoped>
.tlabel {
  margin-left: 7px;
}
@media (max-width: 600px) {
  .tlabel {
    display: none;
  }
}
</style>
