import React, { FC } from "react"

interface Props {
  children:
    | React.ReactNode
    | React.ReactNode[]
    | React.ReactElement
    | React.ReactElement[]
    | string
  className?: string
  innerClassName?: string
  fullHeight?: boolean
  sectionPadding?: boolean
}

export const Container: FC<Props> = (props) => {
  const {
    children,
    className = "",
    innerClassName = "",
    fullHeight = false,
    sectionPadding = false,
  } = props

  return (
    <div
      className={`w-full ${fullHeight ? "min-h-screen" : ""} ${sectionPadding ? "py-8 md:py-16 lg:py-24" : ""} ${className}`}
    >
      <div
        className={`max-w-7xl mx-auto px-4 md:px-6 lg:px-8 w-full ${innerClassName}`}
      >
        {children}
      </div>
    </div>
  )
}