import React from "react"

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

interface IProps {
  title: string | React.ReactNode
  subtitle: string
  children?: React.ReactNode
  image: {
    media: BackgroundImg
  }
  imageMobile?: string
  attrs?: { [key: string]: string | boolean | { [key: string]: string } }
  withoutMask?: boolean
}

const Banner: React.FC<IProps> = ({
  title,
  subtitle,
  image,
  children,
  attrs,
  withoutMask,
}) => {
  const innerDOM = (
    <div className={styles.container} {...attrs}>
      <h1>{title}</h1>
      <h5>{subtitle}</h5>
      <div className={styles.content}>{children}</div>
    </div>
  )
  return (
    <Background
      className={styles.banner}
      image={image}
      isShowMask={!withoutMask}
    >
      {innerDOM}
    </Background>
  )
}

export default Banner