import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";

/**
 * # Color Scheme Loader
 * @className_wrapper twui-color-scheme-selector
 */
export default function ColorSchemeSelector({
    active,
    setActive,
    toggleProps,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    toggleProps?: TWUI_TOGGLE_PROPS;
    active: boolean;
    setActive: React.Dispatch<React.SetStateAction<boolean>>;
}) {
    React.useEffect(() => {
        if (active) {
            document.documentElement.className = "dark";
        } else {
            document.documentElement.className = "";
        }
    }, [active]);

    return (
        <div
            {...props}
            className={twMerge(
                "flex flex-row items-center",
                "twui-color-scheme-selector",
                props.className
            )}
        >
            <Toggle active={active} setActive={setActive} {...toggleProps} />
        </div>
    );
}
