import React from 'react'
import { styled } from 'styleh-components'
import classNames from 'classnames'
import { AccordionContainer } from './styled'

const Wrapper = styled.div.className('container')``

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 aria-hidden={!isActive} id={id}>
      <AccordionContainer className={boxClassName} isDisabled={isDisabled}>
        {children}
      </AccordionContainer>
    </Wrapper>
  )
}

export { AccordionWrap }
export default AccordionWrap