<script lang="ts" setup>
import { onMounted } from 'vue'
import { useTheme } from 'vuetify'

const STORAGE_KEY = 'ezscale-theme'
const theme = useTheme()

onMounted(() => {
  const saved = localStorage.getItem(STORAGE_KEY)
  if (saved === 'light' || saved === 'dark') {
    theme.global.name.value = saved
  }
})

function toggleTheme(): void {
  const next = theme.global.current.value.dark ? 'light' : 'dark'
  theme.global.name.value = next
  localStorage.setItem(STORAGE_KEY, next)
}
</script>

<template>
  <VBtn icon variant="text" size="small" @click="toggleTheme">
    <VIcon :icon="theme.global.current.value.dark ? 'tabler-sun' : 'tabler-moon'" />
  </VBtn>
</template>
