import React from 'react'
import { css } from '@mxenabled/cssinjs'
import PropTypes from 'prop-types'
import { useTokens } from '@kyper/tokenprovider'

export const ButtonGroup = ({ children, className = '', ...rest }) => {
  const tokens = useTokens()
  const styles = getStyles(tokens)

  return (
    <div className={`${css(styles)} kyper-buttongroup ${className}`} {...rest}>
      {children}
    </div>
  )
}

const getStyles = tokens => ({
  display: 'flex',
  alignItems: 'center',

  '& > button': {
    marginRight: tokens.Spacing.Small,
    '&.kyper-transparent': {
      marginRight: tokens.Spacing.XSmall,
    },
    '&:last-child': {
      marginRight: 0,
    },
  },
})

ButtonGroup.propTypes = {
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
}

ButtonGroup.displayName = 'ButtonGroup'
