import { twMerge } from "@utils/tailwindMerge";
import React from "react";
import { MIcon } from "./MIcon";
export const SquaredCheckbox = ({
	id,
	active,
	setActive,
	classNames,
}: {
	id: string;
	active: boolean;
	setActive: (value: boolean) => void;
	classNames?: string;
}) => {
	// biome-ignore format:
	const style = twMerge(`bn-w-6 bn-h-6 bn-flex-shrink-0 bn-rounded-[5px] bn-border bn-border-solid bn-cursor-pointer bn-flex bn-items-center bn-justify-center ${active ? 'bn-bg-theme' : 'bn-border-primary' }`, classNames)

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