hero.jsx

import React, { useState, useEffect } from 'react'
import GatsbyImage from 'gatsby-image'

const useWindowWidth = () => {
  if (typeof window === 'undefined') return 400
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)

  const handleWindowResize = () => {
    setWindowWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', handleWindowResize)
    return () => window.removeEventListener('resize', handleWindowResize)
  }, [])

  return windowWidth
}
/**
 * @summary Hero component showing Text overlay on desktop
 * @property {object} props
 * @property {object} largeDeviceImg - Gatsby Large Image object
 * @property {object} [smallDeviceImg] - optional Gatsby Large Image object
 * @property {string} title title - title of hero
 * @property {string} subtitle subtitle
 * @property {string} linktext linktext
 * @property {string} linkurl
 * @property {string} bottomPos  - Position of text relative to container (rem)
 * @property {string} align  - Flexbox tailwind class alignment eg justify-end, justify-center
 * @property {string} classprop  - Container level classes
 * @property {string} heading  - Heading text
 * @property {string} subheading  - color bassed to reveal
 */
function Hero({
  largeDeviceImg,
  smallDeviceImg,
  title,
  subtitle,
  linktext,
  linkurl,
  bottomPos,
  align,
  classprop,
  heading,
  subheading,
}) {
  const fallBackImage = largeDeviceImg ? largeDeviceImg : smallDeviceImg
  const sharpImage = useWindowWidth() >= 767 ? largeDeviceImg : smallDeviceImg

  return (
    <div className="md:visible relative">
      <GatsbyImage fluid={sharpImage ? sharpImage : fallBackImage} />
      <div
        className={`${
          align ? `${align}` : null
        } ${classprop} static md:absolute justify-end flex flex-col w-full h-full pb-0 mt-2 `}
        style={{ bottom: bottomPos }}
      >
        <p className={`${heading} child text-white font-bold block mb-1 `}>{title}</p>
        <p className={`${subheading} child text-white md:text-lg mb-1`}>{subtitle}د</p>

        <a href={linkurl} className="btn btn-blue">
          {linktext}
        </a>
      </div>
    </div>
  )
}

export default Hero