import * as React from "react";
import { cn } from "@/lib/utils";

interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
  label?: string;
  error?: boolean;
}

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, label, error, disabled, ...props }, ref) => (
    <label className={cn("inline-flex items-center gap-2 cursor-pointer", disabled && "opacity-50 cursor-not-allowed")}>
      <input
        ref={ref}
        type="checkbox"
        disabled={disabled}
        className={cn(
          "h-4 w-4 rounded border appearance-none",
          "transition-all duration-150",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
          error
            ? "border-(--color-danger) checked:bg-(--color-danger)"
            : "border-(--color-border) checked:bg-(--color-accent)",
          "checked:border-transparent",
          className
        )}
        {...props}
      />
      {label && <span className="text-sm text-(--color-ink)">{label}</span>}
    </label>
  )
);
Checkbox.displayName = "Checkbox";