import React from "react";
import { useGetCompanyProjects } from "../../../apis/Company";
import { useMemo } from "react";
/**
 * Represents Section 3 of the home page.
 * @module Home/Section3
 * @returns {JSX.Element} The Section 3 component.
 */
function Section3() {
  /**
   * React query hook for getting company projects
   * @type {{ data: Object, isLoading: boolean }}
   * @name useGetCompanyProjects
   * @memberof module:Home/Section3
   */
  const { data: projectsData, isLoading: projectLoading } =
    useGetCompanyProjects();
  /**
   * List of projects associated with the company.
   * @type {Array<Object>}
   * @memberof module:Home/Section3
   */
  const projects = useMemo(() => {
    const temp = projectsData?.data?.data?.results || [];
    return temp;
  }, [projectsData?.data]);
  if (projectLoading) {
    return;
  }
  return (
    <section id="projects">
      <div className="container mx-auto lg:flex align-items-center lg:h-screen">
        <div className="">
          <h5 className="font-quicksand text-[16px] mt-3 font-[700]">
            Featured Projects
          </h5>
          <h2 className="text-[38px]  font-[600] mt-3 mb-4">What we do</h2>
          <div className="lg:grid lg:grid-cols-3 gap-4 ...">
            {projects.map((projects, index) => (
              <div
                className="md:flex md:mb-4 sm:mb-4 items-center justify-between project-card rounded backdrop-blur-sm bg-white/30 
                               hover:-translate-y-7 transition duration-700 ease-in-out"
                key={index}
              >
                <img
                  src={projects?.project_logo}
                  alt=""
                  className="company-logo"
                />
                <h2 className="text-[22px]  font-[600] mb-4 ms-3">
                  {projects?.project_name || ""}
                </h2>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default Section3;