import '../scss/_button-group.scss';
import CheckIcon from '../icons/CheckIcon';

/**
 * Creates a group of connected (radio) buttons
 * @param {object} props - Props: options, value, onChange
 */
const ButtonGroup = ({ options, value, onChange, className = '', disabled = false }) => {

	return (
		<div className={`adpresso-button-group ${disabled ? 'is-disabled' : ''}`} role="group">
			{options.map((option) => {
				const isActive = value === option.key;
				const classNames = [
					'adpresso-button-group__button',
					isActive ? 'is-active' : '',
					option.isDestructive ? 'is-destructive' : '',
					className
				].filter(Boolean).join(' ');

				return (
					<button
						key={option.key}
						type="button"
						className={classNames}
						onClick={() => !disabled && onChange(option.key)}
						aria-pressed={isActive}
						disabled={disabled}
					>
						<CheckIcon width="13" height="13" />
						{option.label}
					</button>
				);
			})}
		</div>
	);
};

export default ButtonGroup;