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

export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    active?: boolean;
    circleProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
};

/**
 * # Toggle Component
 * @className_wrapper twui-toggle-wrapper
 * @className_circle twui-toggle-circle
 */
export default function Toggle({
    circleProps,
    active,
    ...props
}: TWUI_TOGGLE_PROPS) {
    return (
        <div
            {...props}
            className={twMerge(
                "flex flex-row items-center w-full max-w-[200px]",
                "border border-slate-300 border-solid rounded-full",
                active ? "" : "",
                "twui-toggle-wrapper",
                props.className
            )}
        >
            <div
                {...circleProps}
                className={twMerge(
                    "w-20 h-20 rounded-full",
                    active ? "" : "",
                    "twui-toggle-circle",
                    circleProps?.className
                )}
            ></div>
        </div>
    );
}