import PropTypes from 'prop-types'
import SimpleBar from 'simplebar-react'
import 'simplebar-react/dist/simplebar.min.css'

const ScrollBox = ({
  children,
  style,
  horizontalBottomPadding = 16,
  verticalRightPadding = 16,
  inner = false,
  smallPadding = false,
  ...rest
}) => {
  return (
    <div
      style={{
        height: '100%',
        minHeight: '0',
        '--scrollbox-vertical-right-padding': `${verticalRightPadding}px`,
        '--scrollbox-horizontal-bottom-padding': `${horizontalBottomPadding}px`
      }}
      className={`${inner ? 'scrollbox-inner' : ''} ${smallPadding ? 'scrollbox-inner-small-padding' : ''}`}
    >
      <SimpleBar style={{ height: '100%', ...style }} {...rest}>
        {children}
      </SimpleBar>
    </div>
  )
}

ScrollBox.propTypes = {
  children: PropTypes.node,
  style: PropTypes.object,
  horizontalBottomPadding: PropTypes.number,
  verticalRightPadding: PropTypes.number,
  inner: PropTypes.bool,
  smallPadding: PropTypes.bool
}

export default ScrollBox
