import {useEffect, useState} from 'react'

export type Theme = 'dark' | 'light' | 'cyber'

function getStored(): Theme {
    const v = localStorage.getItem('floci-theme')
    return v === 'light' || v === 'cyber' ? v : 'dark'
}

export function useTheme() {
    const [theme, setTheme] = useState<Theme>(getStored)

    useEffect(() => {
        document.documentElement.setAttribute('data-theme', theme)
        localStorage.setItem('floci-theme', theme)
    }, [theme])

    return {theme, setTheme}
}