import React from 'react';
import styles from './index.module.less';

class RadioButtonGroup extends React.Component {
  static defaultProps = {
    options: [
      { label: '日', value: 'day' },
      { label: '月', value: 'month' },
      { label: '年', value: 'year' },
    ],
    value: 'day',
    onChange: () => {},
  };

  handleSelect = (val) => {
    const { value, onChange } = this.props;
    if (val !== value) {
      onChange(val);
    }
  };

  render() {
    const { options, value } = this.props;

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

export default RadioButtonGroup;
