import { useState, useEffect } from 'react';

export const getSystemStyle = (): 'light' | 'dark' => {

    if(!process.browser || !window)

        return "light"

    return window.matchMedia('(prefers-color-scheme: dark)').matches

        ? "dark"

        : "light"

}

const usePrefersColorScheme = (): 'light' | 'dark' => {

    const [scheme, setScheme] = useState<'light' | 'dark'>('light');

    useEffect(() => {

        const updateScheme = (): void => {

            setScheme(getSystemStyle());

        };

        window

            .matchMedia('(prefers-color-scheme: dark)') 

            .addEventListener('change', updateScheme);

        updateScheme()

        return () => window

            .matchMedia('(prefers-color-scheme: dark)') 

            .removeEventListener('change', updateScheme);

    }, []);

    return scheme;

};

export default usePrefersColorScheme