import { forwardRef, type ComponentPropsWithoutRef } from "react";
import { cn } from "#/lib/cn";

export interface CheckboxProps extends ComponentPropsWithoutRef<"input"> {
	label?: string;
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
	({ className, label, id, disabled, ...props }, ref) => {
		return (
			<label
				className={cn(
					"flex items-center gap-2.5 cursor-pointer",
					disabled && "cursor-not-allowed",
				)}
			>
				<input
					ref={ref}
					type="checkbox"
					id={id}
					disabled={disabled}
					className={cn(
						"w-[18px] h-[18px] accent-blue-600 cursor-pointer",
						disabled && "opacity-40 cursor-not-allowed",
						className,
					)}
					{...props}
				/>
				{label && (
					<span
						className={cn(
							"text-sm font-medium text-slate-900",
							disabled && "opacity-40",
						)}
					>
						{label}
					</span>
				)}
			</label>
		);
	},
);

Checkbox.displayName = "Checkbox";