import Tippy from '@tippyjs/react'
import axios from 'axios'
import Image from 'next/image'
import Container from 'components/BlogContainer'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

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

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

    fetchData()
  }, [])

  return (
    <Container>
      <Fade duration={2400} fraction={0} delay={0} triggerOnce cascade>
        <Image
          src="/images/6b57ca82593b4defdc6904f863b8ba693d250dc3-1920x1080.jpg"
          alt="Garuda Wisnu Kencana"
          width={1440}
          height={300}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          quality={75}
          placeholder="empty"
          priority
          className="hidden h-full min-h-screen w-full object-cover opacity-90"
        />

        <div
          className="bg-slate-0 p-0  align-top sm:mt-0 sm:h-full"
          style={{
            backgroundImage:
              // `url(${item.imgbackground})`,
              'url(/images/6b57ca82593b4defdc6904f863b8ba693d250dc3-1920x1080.jpg)',
            backgroundSize: 'cover',
          }}
        >
          <div className="mx-auto pb-8 pl-2 pr-5 pt-8 align-middle backdrop-brightness-50 sm:w-5/6 sm:pb-20 sm:pt-20">
            <div className="m-0">
              {data.map((item) => (
                <h2
                  key={item._id}
                  className="mb-5 text-center font-sans text-xl font-light text-stone-100 sm:text-2xl"
                >
                  {item.heading}
                </h2>
              ))}

              {data.map((item) => (
                <h3
                  key={item._id}
                  className="mb-5 text-center font-serif text-3xl font-bold leading-normal text-stone-100 sm:mb-10 sm:text-6xl sm:font-bold"
                >
                  {item.subheading}
                </h3>
              ))}
              {/* </Fade> */}
            </div>

            <div className="mx-auto w-full gap-0 pb-0 sm:px-0">
              <div className="w-full">
                {/* <Fade duration={1200} fraction={0} delay={2400} triggerOnce cascade> */}
                {data.map((item) => (
                  <div
                    key={item._id}
                    className="mx-5 text-center font-sans text-sm leading-relaxed text-stone-100 sm:mx-32 sm:text-base sm:font-light"
                    dangerouslySetInnerHTML={{
                      __html: item.paragraph[0].children[0].text,
                    }}
                  ></div>
                ))}

                <div className="hidden p-10 text-center sm:block">
                  <span className="mb-5 inline-block sm:mx-2">
                    {/* <Tippy content="Get your ticket here!" className='text-xs font-sans' interactive={true} interactiveBorder={20} delay={100}> */}

                    {data.map((item) => (
                      <div key={item._id}>
                        <Link href="https://ticket.gwkbali.com/">
                          <button className="rounded-md bg-yellow-600 px-4 py-2 font-sans text-base font-medium text-white duration-150 ease-in hover:bg-yellow-500">
                            {item.CTA.linkText}
                          </button>
                        </Link>
                      </div>
                    ))}

                    {/* </Tippy> */}
                  </span>
                </div>
                {/* </Fade> */}
              </div>
            </div>
          </div>
        </div>
      </Fade>
    </Container>
  )
}

export default TheStory