import * as React from "react";

import classNames from "classnames";

interface Props {
  value: string,
  checked: boolean,
  name: string,
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
  label: React.ReactNode,
}

export const RadioButton: React.FC<Props> = ({
  name,
  value,
  checked,
  onChange,
  label,
}) => {
  return (
    <label className='radio-button'>
      <input
        name={name}
        type='radio'
        value={value}
        checked={checked}
        onChange={onChange}
      />

      <span className={classNames("radio-button__input", { checked })} />

      <span>{label}</span>
    </label>
  );
};