import type { CheckboxProps } from "$/types/InputTypes";
import { Checkbox, Field, Label } from "@headlessui/react";
import clsx from "clsx";


export default function MattrixwvCheckbox({
	className,
	labelClassName,
	name,
	size = "sm",
	showBox = true,
	onChange,
	checked,
	defaultChecked,
	strokeWidth = 2,
	value,
	disabled,
	children
}: Readonly<CheckboxProps>){
	return (
		<Field
			className="flex flex-row items-center justify-center gap-x-2"
		>
			<Checkbox
				data-testid="mattrixwv-checkbox"
				className={clsx(
					"group",
					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
					{
						"cursor-pointer": !disabled,
						"cursor-not-allowed": disabled
					}
				)}
				name={name}
				checked={checked}
				defaultChecked={defaultChecked}
				onChange={onChange}
				value={value}
				disabled={disabled}
			>
				{/* Checkbox */}
				<div
					data-testid="mattrixwv-checkbox-graphic"
					className={clsx(
						className,
						{
							"border rounded": showBox
						},
						{
							"": size === "none",
							"size-3": size === "xs",
							"size-4": size === "sm",
							"size-5": size === "md",
							"size-6": size === "lg",
							"size-7": size === "xl"
						}
					)}
				>
					<svg
						viewBox="0 0 14 14"
						fill="none"
						aria-hidden="true"
					>
						<path
							d="M3 8L6 11L11 3.5"
							strokeWidth={strokeWidth}
							strokeLinecap="round"
							strokeLinejoin="round"
						/>
					</svg>
				</div>
			</Checkbox>
			{/* Label */}
				{
					children &&
					<Label
						data-testid="mattrixwv-checkbox-label"
						className={labelClassName}
					>
						{children}
					</Label>
				}
		</Field>
	);
}