import React, { useEffect, useState } from "react"
import cls from "classnames"

import * as styles from "./index.module.scss"
import useWindowDimensions from "@/hooks/useWindowDimensions"

interface IProps {
  image: {
    media: BackgroundImg
  }
  children?: React.ReactNode
  className?: string
  isShowMask?: boolean
}

const Background: React.FC<IProps> = ({
  image: {
    media: { url = "", width = 1, height = 1 },
  },
  isShowMask = true,
  className,
  children,
}) => {
  const { width: screenWidth } = useWindowDimensions()
  const [isOver, setIsOver] = useState<boolean>(true)

  useEffect(() => {
    setIsOver(screenWidth > width / 2)
  }, [screenWidth])

  return (
    <div
      className={cls(
        styles.background,
        !isShowMask && styles.noMask,
        className
      )}
      data-role="background"
      style={{
        backgroundImage: `url(${url})`,
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      }}
    >
      {children}
    </div>
  )
}

export default Background