import React, { createContext } from "react"
import PropTypes from "prop-types"
import cx from "classnames"

export const ButtonGroupContext = createContext({})

function ButtonGroup({
  children,
  className,
  spacing = 1,
  orientation = "horizontal",
  ...props
}) {

  const classes = cx(
    "inline-flex border border-solid border-gray-200 rounded",
    className,
    `p-${spacing}`,
    `gap-${spacing}`,
    {
      "flex-col": orientation === "vertical",
    }
  )

  return (
    <div {...props} className={classes} data-testid="btn-group">
      <ButtonGroupContext.Provider value={{ present: true }}>
        {children}
      </ButtonGroupContext.Provider>
    </div>
  )
}

export default ButtonGroup

ButtonGroup.propTypes = {
  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  className: PropTypes.string,
  children: PropTypes.node,
}
