import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";


const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
	className,
	showBox = true,
	...props
}, ref) => {
	return (
		<MattrixwvCheckbox
			className={clsx(
				className,
				{
					"group-data-checked:bg-tertiary group-data-checked:stroke-white": showBox,
					"group-data-checked:stroke-tertiary": !showBox
				}
			)}
			showBox={showBox}
			{...props}
			ref={ref}
		/>
	);
});

TertiaryCheckbox.displayName = "TertiaryCheckbox";

export default TertiaryCheckbox;