import { createClient } from '@sanity/client'
import axios from 'axios'
import { projectId } from 'lib/sanity.api'
import Image from 'next/image'
import Link from 'next/link'
import React, { Children, useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'
import { Carousel } from '@material-tailwind/react'
import { format, parseISO } from 'date-fns'
import { IoCalendarOutline, IoNewspaperOutline } from 'react-icons/io5'

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

  return (
    <div className="p-5">
      <div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
        {data.map((item) => (
          <div key={item._id}>
            <div className="galleryCardContainer rounded-md border pb-4 shadow-sm">
              <div className="galleryCardHeader"></div>
              <div className="galleryCardBody">
                <Carousel
                  placeholder={null}
                  loop={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>
                  )}
                  className=""
                >
                  {/* loop */}
                  {/* # 1 */}
                  {/* alt = {item.images.altTxt} */}
                  <Image
                    src={item.photosSourceURL[0]}
                    alt={item.altTxt[0]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                  {/* # 2 */}
                  <Image
                    src={item.photosSourceURL[1]}
                    alt={item.altTxt[1]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                  {/* # 3 */}
                  <Image
                    src={item.photosSourceURL[2]}
                    alt={item.altTxt[3]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                  {/* # 4 */}
                  <Image
                    src={item.photosSourceURL[3]}
                    alt={item.altTxt[3]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                  {/* # 5 */}
                  <Image
                    src={item.photosSourceURL[4]}
                    alt={item.altTxt[4]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                  {/* # 6 */}
                  <Image
                    src={item.photosSourceURL[5]}
                    alt={item.altTxt[5]}
                    width={768}
                    height={432}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Carousel>
              </div>
              <div className="galleryCardFooter pt-6">
                <Link href={item.pixiesetURL}>
                  <h2 className="mb-0 pb-1 text-center font-sans text-base font-medium leading-none duration-200 ease-in-out hover:text-yellow-600 sm:text-base">
                    {item.title}
                  </h2>
                </Link>
                <div className="text-center">
                  <span className="inline-flex items-center font-sans text-xs text-stone-600">
                    <IoCalendarOutline />
                    &nbsp;
                    {format(new Date(item.date), 'dd-MM-yyyy')}
                  </span>
                </div>
                {/* <div className="mb-0 pb-3 text-stone-400 text-center font-sans text-sm leading-none sm:text-sm">
                  {format(new Date(item.date), 'dd-MM-yyyy')}</div> */}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
export default GalleryCard