import { ChangeEvent, forwardRef } from 'react';

export interface SimpleCheckboxProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

export const SimpleCheckbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(({ 
  checked, 
  onChange, 
  disabled = false 
}, ref) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked);
  };

  return (
    <input
      ref={ref}
      type="checkbox"
      checked={checked}
      onChange={handleChange}
      disabled={disabled}
      className="w-4 h-4 rounded-none border-[var(--ui-color-border-default)] bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] focus:ring-[var(--ui-color-intent-primary)] cursor-pointer disabled:cursor-not-allowed"
    />
  );
});

SimpleCheckbox.displayName = 'SimpleCheckbox';