import { useState, useEffect } from 'react';

export const getSystemStyle = () => {

    if(!process.browser || !window)

        return "light"

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

        ? "dark"

        : "light"

}

const usePrefersColorScheme = () => {

    const [scheme, setScheme] = useState('light');

    useEffect(() => {

        const updateScheme = () => {

            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