import { ref } from 'vue'

export type Theme = 'apollo' | 'hades'

const stored = localStorage.getItem('mercury-theme') as Theme | null
const theme = ref<Theme>(stored ?? 'apollo')

function applyTheme(t: Theme) {
  theme.value = t
  document.documentElement.setAttribute('data-theme', t)
  localStorage.setItem('mercury-theme', t)
}

applyTheme(theme.value)

export function useTheme() {
  return {
    theme,
    isDark: () => theme.value === 'hades',
    toggle() {
      applyTheme(theme.value === 'apollo' ? 'hades' : 'apollo')
    },
  }
}