import { ButtonGroup as MUIButtonGroup } from "@mui/material";
import React from "react";

import { ButtonVariant, ButtonSize } from "../button/types";
import { useVariant } from "../button/useVariant";
import { useButtonGroupStyles } from "./ButtonGroup.styles";

export type ButtonGroupProps = {
  variant?: ButtonVariant;
  size?: ButtonSize;
  children: React.ReactNode;
};

export const ButtonGroup = ({
  variant = "primary",
  children,
  size = "default",
}: ButtonGroupProps) => {
  const { muiVariant, muiColor } = useVariant(variant);

  const classes = useButtonGroupStyles({ variant });

  return (
    <MUIButtonGroup
      color={muiColor}
      variant={muiVariant}
      classes={classes}
      size="medium"
    >
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, {
            ...child.props,
            size,
            variant,
          });
        }

        return child;
      })}
    </MUIButtonGroup>
  );
};
