import React from 'react'

import ButtonGroup from '../buttonGroup'
import { cs, dimmedBorderColor } from '../utils'
import { ButtonToggleGroupProps } from './buttonToggleGroup.types'

/**
 * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
 */
export const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {
  const { className, isDimmedBorder } = props

  return (
    <ButtonGroup
      className={cs('vui-buttonToggleGroup', className)}
      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}
      {...props}
    />
  )
}

ButtonToggleGroup.displayName = 'ButtonToggleGroup'
export default ButtonToggleGroup
