import axios from 'axios'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import { Fade } from 'react-awesome-reveal'

import Container from 'components/BlogContainer'

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

  useEffect(() => {
    const fetchWhatsNewBanner = async () => {
      try {
        const response = await axios.get('/api/homepageSection/whatsNewBanner')

        setData(response.data)
        // console.log(fetchWhatsNewBanner)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchWhatsNewBanner()
  }, [])

  return (
    <Fade duration={2000} fraction={0} damping={0.5} triggerOnce>
      <div className="m-0 p-0">
        {data.map((item) => (
          <Image
            key={item._id}
            src={item.mainImage}
            alt={item.alt}
            className="m-0 aspect-square p-0"
            width={500}
            sizes="(max-width: 768px) 100vw, (max-width: 1440px) 100vw, 100vw"
            height={600}
          />
        ))}
      </div>
    </Fade>
  )
}

export default WhatsNewBanner