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

export default function ColorSchemeSelector({
    toggleProps,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    toggleProps?: TWUI_TOGGLE_PROPS;
}) {
    const [active, setActive] = React.useState(false);

    React.useEffect(() => {
        if (active) {
            document.documentElement.className = "dark";
        } else {
            document.documentElement.className = "";
        }
    }, [active]);

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