import React from 'react';

import {ButtonGroupStyle as S} from './button-group.style';
import type {IButtonGroupCompound, IButtonGroupItem} from './button-group.type';

export const ButtonGroupComponent: IButtonGroupCompound = ({
    children,
    variant = 'outlined',
    size = 'md',
    color = 'primary',
    borderColor,
    className,
    disabled,
    ...props
}) => {
    return (
        <S.Container className={className} disabled={disabled}>
            {React.Children.map(children, (child: React.ReactElement) =>
                React.cloneElement(child, {
                    ...props,
                    variant: child.props.variant || variant,
                    size,
                    color: child.props.color || color,
                    borderColor: child.props.borderColor || borderColor,
                }),
            )}
        </S.Container>
    );
};

const Button: React.FC<IButtonGroupItem> = (props) => (
    <S.Button type='button' {...props} />
);

ButtonGroupComponent.Button = Button;