import { ref } from 'vue'
import { defineStore } from 'pinia'

export const usePrefersColorSchemeStore = defineStore('prefersColorScheme', () => {
  const prefersColorSchemeDarkMatchMedia = window.matchMedia('(prefers-color-scheme: dark)')
  const isDarkMode = ref<boolean>(prefersColorSchemeDarkMatchMedia.matches)

  prefersColorSchemeDarkMatchMedia.addEventListener('change', (e) => {
    isDarkMode.value = e.matches
  })

  return { isDarkMode }
})
