import { twMerge } from "@utils/tailwindMerge";
import { MIcon } from "./MIcon";
export const SquaredCheckbox = ({
	id,
	active,
	setActive,
	classNames,
}: {
	id: string;
	active: boolean;
	setActive: (value: boolean) => void;
	classNames?: string;
}) => {
	const style = twMerge(
		"bn-text-2xl bn-flex-shrink-0 bn-cursor-pointer",
		active ? "bn-text-accent-1" : "bn-text-[#373A3E]",
		classNames,
	);

	return (
		<div className="bn-flex bn-w-fit bn-h-fit bn-relative">
			<label htmlFor={id} className="bn-size-6">
				{active ? (
					<MIcon classNames={style} name="check_box" />
				) : (
					<MIcon classNames={style} name="check_box_outline_blank" />
				)}
			</label>
			<input
				type="checkbox"
				id={id}
				className="bn-h-0 bn-w-0 bn-invisible"
				onChange={(e) => setActive(e.target.checked)}
			/>
		</div>
	);
};
