import React from "react";
import { useGetCompanyList } from "../../../apis/Company";
import { useMemo } from "react";
/**
 * Represents Section 2 of the home page.
 * @module Home/Section2
 * @returns {JSX.Element} The Section 2 component.
 */
function Section2() {
  /**
   * React query hook to get company list
   * @type {Object}
   * @member {}
   * @name useGetCompanyList
   * @memberof module:Home/Section2
   */
  const { data: companyData, isLoading: companyLoading } = useGetCompanyList();
  /**
   * Getting list of companies
   * @type {Array<Object>}
   * @member {[]}
   * @memberof module:Home/Section2
   */
  const companies = useMemo(() => {
    const temp = companyData?.data?.data?.results || [];
    return temp;
  }, [companyData?.data]);
  /**
   * Filtered list of companies other than RKD Holdings Limited.
   * @type {Array<Object>}
   * @memberof module:Home/Section2
   */
  const filteredList = companies.filter(
    (company) => company?.vat_number !== "604283858"
  );
  /**
   * List of RKD Holdings Limited companies.
   * @type {Array<Object>}
   *  @memberof module:Home/Section2
   */
  const rkd = companies.filter(
    (company) => company?.vat_number === "604283858"
  );
  if (companyLoading) {
    return;
  }
  return (
    <section className=" rounded-lg" id="about">
      <div className="container mx-auto xl:flex pt-5 pb-5">
        <div className="lg:flex align-items-center main-col">
          <div className="lg:grid lg:grid-cols-3 gap-4 ">
            {rkd.map((filteredcompany, index) => (
              <div
                className=" bg-[#fff] border-2 border-[#09aa4e47] text-[#000]  text-center p-3 rounded-lg row-span-2 h-80 xs:h-60 mt-36 company-card "
                key={index}
              >
                <img
                  src={filteredcompany?.logo}
                  alt=""
                  className="mx-auto company-logo"
                />
                <h2 className="text-[26px]  font-[600] mb-3">
                  {filteredcompany.title}
                </h2>
                <p>{filteredcompany.description}</p>
              </div>
            ))}
            {filteredList?.map((company, index) => (
              <div
                className=" company_logo_wrapper bg-[#fff] border-2 border-[#09aa4e47] text-[#000]-500  text-center p-3 rounded-lg company-card"
                key={index}
              >
                <img
                  src={company?.logo}
                  alt=""
                  className="mx-auto company-logo"
                />
                <h2 className="text-[26px]  font-[600] mb-3 mt-3">
                  {company.title}
                </h2>
                <p> {company.description} </p>
              </div>
            ))}
          </div>

          <div className=" ms-4">
            <h5 className="font-quicksand text-[16px] mt-3 font-[700]">
              Group Company
            </h5>
            <h2 className="text-[38px]  font-[600]  mt-3 mb-4 leading-9">
              Our Subsidiary <br /> Companies
            </h2>
            <p>
              RKD Holdings Limited has various subsidiary companies under
              different categories. Our primary businesses today, Bandipur Cable
              car and Tourism Limited and Bizbazar, have grown to substantial
              market capitalizations.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Section2;