/**
 * 统一的 Checkbox 组件
 */
import React from "react";

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

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ label, error, className = "", ...props }, ref) => {
    const baseStyles = "w-4 h-4 text-blue-600 bg-white border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-white cursor-pointer";

    return (
      <div>
        <div className="flex items-center gap-2">
          <input
            ref={ref}
            type="checkbox"
            className={`${baseStyles} ${className}`.trim()}
            {...props}
          />
          {label && (
            <label className="text-sm text-slate-700 cursor-pointer select-none" onClick={(e) => {
              if (props.id) {
                const checkbox = document.getElementById(props.id) as HTMLInputElement;
                if (checkbox && e.target === e.currentTarget) {
                  checkbox.click();
                }
              }
            }}>
              {label}
            </label>
          )}
        </div>
        {error && (
          <p className="mt-1 text-xs text-red-400">{error}</p>
        )}
      </div>
    );
  }
);

Checkbox.displayName = "Checkbox";
