import React from "react";
import classNames from "classnames";
import { BoxProps } from "../Box";
import { Flex } from "../Flex";
import { bem } from "../../utilities/bem";
import { JUSTIFY } from "../../types";

const cn = "ButtonGroup";

export interface ButtonGroupProps extends BoxProps {
  /**
   * Joins the buttons together.
   */
  isSegmented?: boolean;
  /**
   * Makes the buttons fill the entire width of the surrounding
   * container.
   */
  isFullWidth?: boolean;
  /**
   * Uses flexbox layout's [justify-content attribute](https://css-tricks.com/almanac/properties/j/justify-content/),
   * this prop spaces the items accordingly. Valid values from the enum
   * include "around", "between", "center", "end" or "start" (default).
   */
  justify?: JUSTIFY;
}

const ButtonGroup = (props: ButtonGroupProps) => {
  const {
    className,
    isSegmented = false,
    isFullWidth = false,
    justify = JUSTIFY.START,
    ...rest
  } = props;

  const buttonGroupClassName = classNames(
    bem(cn),
    isSegmented && bem(cn, { m: "isSegmented" }),
    isFullWidth && bem(cn, { m: "isFullWidth" }),
    `justify-${justify}`,
    className,
  );

  return <Flex className={buttonGroupClassName} {...rest} />;
};

export { ButtonGroup };