import React from "react";
import { useGetEventsList } from "../../../apis/Events";
import { useMemo } from "react";
/**
 * Represents Section 4 of the home page.
 * @module Home/Section4
 * @returns {JSX.Element} The Section 4 component.
 */
function Section4() {
  /**
   * Data and loading status of events.
   * @type {{ data: Object, isLoading: boolean }}
   * @name useGetEventsList
   * @memberof module:Home/Section4
   */
  const { data: eventData, isLoading: eventLoading } = useGetEventsList();
  /**
   * Memoized list of events with a maximum of 4 items.
   * @type {Array<Object>}
   * @memberof module:Home/Section4
   */
  const events = useMemo(() => {
    let temp = eventData?.data?.data?.results || [];
    temp = temp.filter((event, i) => i <= 3);
    return temp;
  }, [eventData?.data]);

  if (eventLoading) {
    return;
  }

  return (
    <div id="events">
      <div className="container mx-auto pt-5 pb-5 ">
        <div className="lg:grid lg:grid-cols-4 gap-4 p-6">
          <div className=" text-[#000] text-lg p-6 rounded-lg row-span-2 flex align-items-center">
            <div>
              <h5 className="font-quicksand text-[16px] mt-3 font-[700]">
                Our event details
              </h5>
              <h2 className="text-[38px]  font-[600] mt-3 mb-2 leading-9">
                Important Events
              </h2>
              <p>
                Some of the important events that took place at RKD Holdings
                Limited are :
              </p>
            </div>
          </div>
          {events.map((event, index) => (
            <div
              className=" border-[#09aa4e47] text-[#000] text-lg p-3 rounded-lg event-card  hover:scale-110 transition duration-700 ease-in-out"
              key={index}
            >
              <div className="text-center">
                <img
                  src={event?.image}
                  alt=""
                  className="mx-auto w-100 h-40 rounded object-cover "
                />
                <span className="post-date text-sm mt-4 text-[#382c2c]">
                  {event?.event_start_date || ""}
                </span>
                <h2 className="text-[24px]  font-[600] mb-2 mt-2">
                  {event?.title || ""}
                </h2>
                <p>{String(event?.event_information).slice(0, 100) || ""}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
export default Section4;