import clsx from "clsx";
import {ReactElement, ReactNode} from "react";
import {BsCheck} from "react-icons/bs";

interface Props {
	isChecked: boolean;
	onChange: (isChecked: boolean) => void;
	children: ReactNode;
}

export default function Checkbox({isChecked, onChange, children}: Props) {
	return (
		<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => onChange(!isChecked)}>
			<input type="checkbox" className="hidden" />
			<div
				className={clsx(
					"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
					"transition duration-300 ease-in-out",
					isChecked && "!bg-mti-purple-light ",
				)}>
				<BsCheck color="white" className="w-full h-full" />
			</div>
			<span>{children}</span>
		</div>
	);
}