<template>
  <div class="card" style="display: flex; gap: 8px; align-items: center;">
    <label>{{ t('theme.label') }}</label>
    <select v-model="current" @change="applyTheme">
      <option value="light">light</option>
      <option value="dark">dark</option>
      <option value="monokai">monokai</option>
      <option value="gruvbox-dark">gruvbox-dark</option>
    </select>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()

const current = ref('gruvbox-dark')

const applyTheme = () => {
  document.documentElement.setAttribute('data-theme', current.value)
  localStorage.setItem('theme', current.value)
}

onMounted(() => {
  const saved = localStorage.getItem('theme') || 'gruvbox-dark'
  current.value = saved
  applyTheme()
})
</script>
