import * as React from "react"
import { Background, Container } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  className?: string
  bannerBg?: {
    media: BackgroundImg
  }
  text: string
  isSmall?: boolean
}

const ProductBanner: React.FC<IProps> = ({
  className,
  bannerBg,
  text,
  isSmall,
}) => {
  return (
    <div>
      {bannerBg ? (
        <Background image={bannerBg} className={styles.bannerContent}>
          <Container isSmall={isSmall}>
            <h1>{text}</h1>
          </Container>
        </Background>
      ) : (
        <div
          className={`${styles.bannerContent} ${
            className ? styles[className] : ""
          }`}
        >
          <Container isSmall>
            <h1>{text}</h1>
          </Container>
        </div>
      )}
    </div>
  )
}

export default ProductBanner