// import { height } from 'components/OpenGraphImage'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'

export default function HeaderImage({ dat }) {
  const [picture, setPicture] = useState('')

  useEffect(() => {
    if (dat.imageUrl == null || dat.imageUrl == '') {
      let imgLoad = localStorage.getItem('header-' + location.href) || ''
      setPicture(imgLoad)
    } else {
      localStorage.setItem('header-' + location.href, dat.imageUrl)
      setPicture(dat.imageUrl)
    }
  }, [picture, dat])

  return (
    <>
      <div
        style={{
          backgroundImage:
            dat.imageUrl ? `url(${dat.imageUrl})` : 'url(/images/72ce25996a03be02b1278410ce232c0119c81145.jpg)',
          //'url(https://cdn.sanity.io/images/helyis1v/production/72ce25996a03be02b1278410ce232c0119c81145-5393x3595.jpg)',
          // backgroundImage: "url('" + picture + "')",
          backgroundSize: 'cover',
          backgroundAttachment: 'fixed',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
        }}
        className="bg-stone-800 relative h-screen overflow-hidden bg-cover bg-no-repeat p-12 text-center"
      >
        <div className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed">
          <div className="flex max-h-full min-h-full items-center justify-center">
            <div className="text-white">
              <h1 style={{textShadow: '0 0 20px #000'}} className="mb-5 text-center text-6xl font-bold leading-tight md:text-center md:text-7xl md:leading-none lg:text-6xl">
                {dat.title}
              </h1>
              <h2 style={{ textShadow: '0 0 20px #000' }} className="mb-6 font-sans text-lg font-semibold uppercase tracking-widest">
                {dat.subTitle}
              </h2>
              <a href="https://bit.ly/buttonbuyticketwebsite" target="_blank">
              {dat.hideButton ? <></>:<>
                <button className="spacong animate-fade-up rounded-md bg-yellow-600 px-10 py-5 font-sans text-xl font-bold leading-7 tracking-wide text-stone-50 shadow-sm duration-300 ease-in animate-delay-[600ms] animate-duration-[1200ms] animate-once hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500">
                  BUY TICKET
                </button>
              </>}
              </a>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}