import React from 'react'
import classNames from 'classnames'
import { AccordionContainer, Wrapper } from './styled'

const AccordionWrap = props => {
  const { isDisabled, isActive, children, className, id } = props

  const config = {
    'accordion-block': true,
    open: isActive,
    closed: !isActive,
  }

  const boxClassName = classNames(config, className)
  // @todo merge this nesting?
  // @note if prop is undefined, it is not passed
  return (
    <Wrapper id={id} className={boxClassName}>
      <AccordionContainer isDisabled={isDisabled}>
        {children}
      </AccordionContainer>
    </Wrapper>
  )
}

export { AccordionWrap }
export default AccordionWrap