import React, { useState } from 'react';

export interface ICheckItemProps {
  label?: string;
  defaultValue?: boolean;
  onChange: (label: string | undefined, selected: boolean) => void;
}

export const CheckItem: React.FC<ICheckItemProps> = ({
  label,
  defaultValue = false,
  onChange,
}) => {
  const [checked, setChecked] = useState(defaultValue);

  const handleClick = () => {
    const newCheckedState = !checked;
    setChecked(newCheckedState);
    onChange(label, newCheckedState);
  };

  return (
    <div onPointerDown={handleClick}>
      <input
        className="rpgui-checkbox"
        type="checkbox"
        checked={checked}
        readOnly
      />
      <label>{label}</label>
      <br />
    </div>
  );
};
