import React from 'react';

interface IProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  label: string;
  name: string;
  value: string;
  isChecked: boolean;
  onRadioSelect: (value: string) => void;
}

export const InputRadio: React.FC<IProps> = ({
  label,
  name,
  value,
  isChecked,
  onRadioSelect,
}) => {
  const onRadioClick = (): void => {
    onRadioSelect(value);
  };

  return (
    <div onPointerUp={onRadioClick}>
      <input
        className="rpgui-radio"
        name={name}
        value={value}
        type="radio"
        data-rpguitype="radio"
        checked={isChecked}
        // rpgui breaks onChange on this input (doesn't work). That's why I had to wrap it with a div and a onClick listener.
        readOnly
      ></input>
      <label>{label}</label>
    </div>
  );
};
