import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    active?: boolean;
    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
    circleProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
};

/**
 * # Toggle Component
 * @className_wrapper twui-toggle-wrapper
 * @className_circle twui-toggle-circle
 */
export default function Toggle({
    circleProps,
    active,
    setActive,
    ...props
}: TWUI_TOGGLE_PROPS) {
    return (
        <div
            {...props}
            className={twMerge(
                "flex flex-row items-center w-[40px] p-[3px] transition-all",
                "border border-slate-300 dark:border-white/30 border-solid rounded-full",
                active ? "justify-end" : "justify-start",
                "twui-toggle-wrapper",
                props.className
            )}
            onClick={() => setActive?.(!active)}
        >
            <div
                {...circleProps}
                className={twMerge(
                    "w-3.5 h-3.5 rounded-full ",
                    active
                        ? "bg-blue-600 dark:bg-blue-500"
                        : "bg-slate-300 dark:bg-white/40",
                    "twui-toggle-circle",
                    circleProps?.className
                )}
            ></div>
        </div>
    );
}