import React, { ReactNode } from "react";

import "./ButtonGroup.css";
import { getCN, renderProps, usePadding } from "../utils";

export interface IButtonGroup extends React.HTMLAttributes<HTMLDivElement> {
  mode?: "vertical" | "horizontal";
  gap?: "none" | "space" | "s" | "m";
  separator?: "primary" | "secondary" | false;
  stretched?: boolean;
  rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
  align?: "left" | "right" | "center"
}

function ButtonGroup({
  children,
  rootRef,
  stretched = false,
  gap = "m",
  mode = "horizontal",
  align = "left",
  separator,
  ...props
}: IButtonGroup) {
  return (
    <div
      role="group"
      ref={rootRef}
      {...props}
      data-separator={separator}
      className={getCN(
        [
          `ButtonGroup`,
          `ButtonGroup--mode-${mode}`,
          gap !== "none" && `ButtonGroup--gap-${gap}`,
          stretched && "ButtonGroup--stretched",
          `ButtonGroup--align-${align}`,
        ],
        props.className
      )}
    >
      {children}
    </div>
  );
}
export default ButtonGroup;