import React from 'react'
import classnames from 'classnames'

type WrapperProps = {
  isPackage?: boolean
  isBasic?: boolean
  modifiers: string[]
  backgroundColor?: string
}

const Wrapper: React.FC<React.PropsWithChildren<WrapperProps>> = ({
  children,
  isBasic,
  modifiers = [],
  backgroundColor,
}) => {
  const modifierClasses = modifiers.map((modifier) => `o-topper--${modifier}`)
  const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ')

  const wrapperClassnames = classnames({
    'o-topper': true,
    'article-topper': true,
    [`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
    'o-topper--basic': isBasic,
    [`${modifierClassesString}`]: Boolean(modifierClassesString),
  })

  return <div className={wrapperClassnames}>{children}</div>
}

export default Wrapper