import cx from "classnames";

interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
  /** On XS viewport, forces buttons to stack vertically and span the available width. */
  isStackedOnXs?: boolean;
  className?: string;
  children?: React.ReactNode;
}

const CLASS_ROOT = "buttons";

const Buttons: React.FC<ButtonsProps> = ({
  isStackedOnXs,
  children,
  className,
  ...other
}) => (
  <div
    className={cx(
      CLASS_ROOT,
      {
        [`${CLASS_ROOT}--stack-on-xs`]: isStackedOnXs,
      },
      className,
    )}
    {...other}
  >
    {children}
  </div>
);

Buttons.displayName = "Buttons";

export { Buttons };