import * as React from "react"
import classnames from "classnames"
import * as styles from "./index.module.scss"

export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  hasBackgroundColor?: boolean
  classNameContainer?: React.HTMLAttributes<HTMLDivElement>["className"]
}

export default function BackgroundContainer({
  hasBackgroundColor = false,
  className,
  classNameContainer,
  children,
  ...props
}: IProps) {
  return (
    <div
      className={classnames(classNameContainer, {
        [styles.hasBackgroundColor]: hasBackgroundColor,
      })}
    >
      <div
        className={classnames("container", "px-4", className, {
          [styles.hasBackgroundColor]: hasBackgroundColor,
        })}
        {...props}
      >
        {children}
      </div>
    </div>
  )
}