// SECTION: WHATSNEW
import axios from 'axios'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { Carousel, Typography, Button } from '@material-tailwind/react'

const WhatsNewMediaCorner = () => {
  const [whatsnew, setData] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          'https://cmswp.gwkbali.com/wp-json/wp/v2/mediacorner/'
        )
        setData(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [])

  return (
    <div>
      <Carousel
        className=""
        placeholder={null}
        loop={true}
        autoplay={true}
        navigation={({ setActiveIndex, activeIndex, length }) => (
          <div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
            {new Array(length).fill('').map((_, i) => (
              <span
                key={i}
                className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
                  activeIndex === i ? 'w-8 bg-white' : 'w-4 bg-white/50'
                }`}
                onClick={() => setActiveIndex(i)}
              />
            ))}
          </div>
        )}
      >
        {whatsnew.slice(0, 3).map((item) => (
          <div key={item.id} className="relative h-full w-full">
            {/* {item._links["wp:featuredmedia"]} */}
            {/* {item.featured_media ? item.featured_media.source_url : ''} */}

            <Image
              //src="https://cdn.sanity.io/images/helyis1v/production/5dcd9f8851d478df6cc77f491766f6e6c5def6d7-1920x1080.png"
              src="/images/5dcd9f8851d478df6cc77f491766f6e6c5def6d7-1920x1080.png"
              alt={item.title.rendered}
              width={800}
              height={300}
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              quality={75}
              placeholder="empty"
              className="h-full min-h-screen w-full object-cover opacity-90"
            />

            <div className="absolute inset-0 grid h-full w-full place-items-center bg-black/80">
              <div className="w-3/4 text-center md:w-2/4">
                <Link href={`/media-corner/${item.slug}`}>
                  <Typography
                    placeholder={null}
                    variant="h3"
                    color="white"
                    className="mb-4 font-PlayfairDisplay text-2xl font-extrabold leading-normal text-orange-300 duration-300 ease-in hover:text-stone-50 sm:text-4xl sm:leading-tight "
                  >
                    {item.title.rendered}
                  </Typography>
                </Link>
                {/* <Typography
                  children={null}
                  placeholder={null}
                  variant="lead"
                  color="white"
                  className="mb-12 text-base font-medium opacity-80"
                > */}

                <p
                  dangerouslySetInnerHTML={{
                    __html: item.excerpt.rendered,
                  }}
                  className="mb-12 font-Inter text-xs font-normal text-stone-50 opacity-80 sm:text-base"
                ></p>

                {/* </Typography> */}

                <div className="flex justify-center gap-2">
                  <Link href={`/media-corner/${item.slug}`} className="">
                    <Button
                      placeholder={null}
                      size="sm"
                      color="white"
                      variant="outlined"
                      className="text-xs font-normal"
                    >
                      Read More
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  )
}

export default WhatsNewMediaCorner