import useToggle from "@Front/Hooks/useToggle";
import classNames from "classnames";
import React, { useCallback } from "react";

import classes from "./classes.module.scss";

export enum EToggleSize {
	MD = "md",
	SM = "sm",
}

export enum ETagVariant {
	REGULAR = "regular",
	SEMI_BOLD = "semi_bold",
}

type IProps = {
	onChange?: (value: boolean) => void;
	defaultActive?: boolean;
	size?: EToggleSize;
	className?: string;
};

export default function Toggle(props: IProps) {
	const { className, defaultActive = false, size = EToggleSize.MD } = props;

	const { active, toggle } = useToggle(defaultActive);

	const handleToggle = useCallback(() => {
		toggle((isOpen) => props.onChange?.(isOpen));
	}, [toggle, props]);

	return (
		<div className={classNames(classes["root"], className, classes[size], active && classes["active"])} onClick={handleToggle}>
			<div className={classNames([classes["circle"], active && classes["active"]])} />
		</div>
	);
}