// SECTION: WHATSNEW

import axios from 'axios'
import Link from 'next/link'
import React, { Children, useEffect, useState } from 'react'
import { format, parseISO } from 'date-fns'
//import { Button } from '@material-tailwind/react'
import { IoCalendarOutline, IoFolderOutline } from 'react-icons/io5'

const WhatsNewMonthlyUpdate2 = () => {
  const [whatsnew, setData] = useState([])

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

    fetchData()
  }, [])

  return (
    <div>
      <div className="pb-2 pt-2 sm:pb-0 sm:pt-0">
        <Link
          href={`/media-corner/page/1`}
          className="readmore font-sans text-sm text-stone-600 hover:text-stone-900"
        >
          <span className="inline-flex items-center pb-2 font-sans text-base sm:pb-5 sm:text-base">
            <IoFolderOutline />
            <span className="pl-2">News & Media</span>
          </span>
        </Link>
      </div>
      {whatsnew.slice(1, 4).map((item) => (
        <div key={item.id}>
          <ul>
            <li key={item.id} className="pb-2 sm:pb-2">
              <div>
                <Link href={`/monthly-release/${item.slug}`}>
                  <h3 className="sm:text-md text-md pb-2 font-semibold leading-tight text-stone-900 duration-150 ease-in hover:text-yellow-600"
                  
                  dangerouslySetInnerHTML={{
                    __html: item.title.rendered,
                  }}              
                  ></h3>
                  
{/* 
                  <h3
                    className="animate-delay-600 text-slate-900 animate-fade pb-3 text-3xl font-semibold leading-tight duration-300 ease-in animate-duration-[600ms] animate-once hover:text-yellow-600 sm:text-4xl"
                    dangerouslySetInnerHTML={{
                      __html: newsroompost.title.rendered,
                    }}
                  ></h3> */}

                </Link>
                <span className="inline-flex items-center font-sans text-sm text-stone-600">
                  <IoCalendarOutline />
                  &nbsp;{format(new Date(item.date), 'dd-MM-yyyy')}
                </span>
              </div>
            </li>
          </ul>
        </div>
      ))}
    </div>
  )
}

export default WhatsNewMonthlyUpdate2