import React from 'react'
import Icon from '../Icon'
import './index.less'

export function Group({ value, onChange, children }) {
  return (
    <div className="radio-group">
      {React.Children.map(
        children,
        (child) =>
          child &&
          React.cloneElement(child, {
            selectValue: value,
            onChange,
          })
      )}
    </div>
  )
}

export function Button({
  selectValue,
  onChange,
  icon,
  disabled,
  value,
  children,
}) {
  return (
    <div className="radio-button-box">
      <div
        className={`radio-button ${
          selectValue === value ? 'radio-button-active' : ''
        } ${disabled ? 'radio-button-disabled' : ''}`}
        onClick={() => !disabled && onChange(value)}
      >
        <span>
          <Icon type={icon} />
        </span>
        <i>{children}</i>
      </div>
    </div>
  )
}

export default {
  Group,
  Button,
}