import React from "react";

export const RoundedCheckbox = ({
	isChecked,
	setIsChecked,
	disabled,
	id,
}: {
	isChecked: boolean;
	setIsChecked: (value: boolean) => void;
	disabled?: boolean;
	id: string;
}) => {
	// biome-ignore format:
	const thumb = `${isChecked ? 'bn-translate-x-[17px] bn-bg-layer-1' : 'bn-bg-white bn-translate-x-[2px]'} bn-w-[13px] bn-h-[13px] bn-rounded-full bn-transition-transform`

	// biome-ignore format:
	const container = `${isChecked ? 'bn-bg-theme' : 'bn-bg-layer-3'} bn-h-[17px] bn-rounded-full bn-w-8 bn-flex bn-items-center bn-cursor-pointer`;

	// @fixme: use color tokens -> thumb
	return (
		<div className="bn-w-fit bn-h-fit bn-relative">
			<input
				type="checkbox"
				onChange={(e) => setIsChecked(e.currentTarget.checked)}
				className="bn-h-0 bn-w-0 bn-absolute -bn-z-10"
				id={id}
				disabled={disabled}
			/>
			<label htmlFor={id} className={container}>
				<div className={thumb} />
			</label>
		</div>
	);
};
