import React from "react";
import styles from "../styles/radio_button_group.less";

class RadioButtonGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: props.options || [],
      label:
        props.label || (props.options.length > 0 ? props.options[0].label : ""),
    };
  }

  handleSelect = (val) => {
    const { onChange } = this.props;
    this.setState({ label: val });
    this.props.onChange && this.props.onChange(val);
  };

  render() {
    const { options, label } = this.state;

    return (
      <div className={styles.screenRadioGroup}>
        {options.map((item, index) => (
          <div
            key={index}
            className={`${styles.customRadioButton} ${
              label === item.label ? styles.checked : ""
            }`}
            onClick={() => this.handleSelect(item.label)}
          >
            {item.label}
          </div>
        ))}
      </div>
    );
  }
}

export default RadioButtonGroup;
