import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Button from './Button';
import styles from './ButtonGroup.module.css';

function ButtonGroup({ items = [], selectedItem, className, size, icon, onClick = () => {} }) {
  return (
    <div className={classNames(styles.group, className)}>
      {items.map(item => {
        const { label, value } = item;
        return (
          <Button
            key={value}
            className={classNames(styles.button, { [styles.selected]: selectedItem === value })}
            size={size}
            icon={icon}
            onClick={() => onClick(value)}
          >
            {label}
          </Button>
        );
      })}
    </div>
  );
}

ButtonGroup.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.node,
      value: PropTypes.any.isRequired,
    }),
  ),
  selectedItem: PropTypes.any,
  className: PropTypes.string,
  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
  icon: PropTypes.node,
  onClick: PropTypes.func,
};

export default ButtonGroup;