import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

const HeroHomepage = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          '/api/homepageSection/heroHomeSectionData'
        )
        setData(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [])

  return (
    <Fade duration={3000} triggerOnce>
      {/* mobile */}
      <div className="relative block min-h-screen bg-white sm:relative sm:hidden sm:min-h-screen">
        <div className="bg-hero-section bg-white bg-cover bg-center bg-no-repeat">
          {data.slice(0, 1).map((data) => {
            return (
              <div
                key="${data._id}"
                dangerouslySetInnerHTML={{
                  __html: `
            <video key="${data._id}"
              loop
              muted
              autoplay
              playsinline                    
              src="${data.videomobile}"
              preload="auto"
              class=""
            />,
          `,
                }}
                className="sm:min-h inset-0 max-h-screen min-h-screen w-full object-cover sm:max-h-screen sm:min-h-screen"
              ></div>
            )
          })}
        </div>
      </div>

      {/* desktop */}
      <div className="min-h-screen_ hidden bg-white sm:relative sm:block sm:min-h-min">
        <div className="bg-hero-section bg-cover_ bg-white bg-center bg-no-repeat">
          <video
            autoPlay
            loop
            muted
            preload="auto"
            className="sm:min-h max-h-screen_ min-h-screen_ sm:max-h-screen_ sm:min-h-screen_ inset-0 aspect-video w-full object-cover"
          >
            {data.map((data) => {
              return (
                <source
                  key={data._id}
                  src={data.video}
                  type="video/mp4"
                  className="min-h-screen"
                />
              )
            })}
          </video>

          {/* <div className="absolute inset-0 max-h-screen min-h-screen bg-black bg-opacity-20">
            <div className="flex max-h-full min-h-full w-full items-center justify-center align-middle">
              <div className="mx-0 my-60 text-center font-thin text-white sm:my-56 sm:text-5xl">
                <h1 className="hidden sm:block sm:font-serif text-4xl sm:text-8xl text-neutral-50 mt-0 mr-2 mb-4 ml-2 sm:mr-36 sm:ml-36 leading-tight">
                  Welcome to The Largest Statue in South East Asia
                </h1> 
              </div>
              <div className="pt-0">
                {/* <span className="block sm:hidden font-serif text-5xl font-ultralight text-neutral-50 mt-0 mr-5 mb-4 ml-5 leading-relaxed">
                    Welcome to <br></br>The <span className="font-semibold">Largest Statue</span> in South East Asia
                  </span> 
                {/* <Link href="https://ticket.gwkbali.com/">
                  <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-[1200ms] animate-duration-[3200ms] 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>
                </Link> 
              </div>
            </div>
          </div> */}
        </div>
      </div>
    </Fade>
  )
}

export default HeroHomepage