import React from "react";
import compileClassNames from "../../libraries/compileClassNames";
import style from "./ButtonGroup.module.css";
import getCompliedCustomId from "../../utils/getCompliedCustomId";
import Group from "../group/Group";

export default function ButtonGroup(props) {
  let {
        children,
        variant,
        direction,
        color,
        gap,

        tagAttributeProps,
        customClassName,

        role,

        customId
    } = props;

    let classNameStyle=compileClassNames(customClassName,{
            [style[variant]] : !!variant,
            [style[color]] : !!color,
            [style[direction]] : !!direction,
            [style[gap]] : !!gap
        },
        {
            [customClassName.variant] : !!customClassName.variant,
            [customClassName.direction] : !!customClassName.direction,
            [customClassName.color] : !!customClassName.color,
            [customClassName.gap] : !!customClassName.gap
        }
    )
    return (
        <Group 
            customClassName={classNameStyle}
            role={role}
            dataId={getCompliedCustomId((props,customId))}
            {...tagAttributeProps}
        >
        { 
            children && children.map((child,i)=>{
                return(
                React.cloneElement(child,
                    {
                        customClassName:{variant:style[variant]},
                        key:i
                    })
            )})
        }
        </Group>);
}
