import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import AboutPeople from "@/container/People/AboutPeople";
import AdvisoryBoard from "@/container/People/AdvisoryBoard";
import TeamLead from "@/container/People/TeamLead";
import TeamMember from "@/container/People/TeamMembers";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import Seo from "@/components/reuseables/Seo/Seo";

const people = ({peoplepage}) => {
  const banners = [
    {
      imageSrc: cleanImage(peoplepage?.Banner?.Image?.url),
      pageTitle: peoplepage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText:  peoplepage?.Banner?.Heading,
    },
    // Add more banners as needed
  ];

  const aboutPeople = peoplepage?.Overview
  const  teamlead = peoplepage?.TeamLeads
  const teamlist = peoplepage?.Teamlist
  const Memberlist = peoplepage?.Memberlist
   const Advisory = peoplepage?.AdvisoryBoard
  //  console.log("AdvisoryBoard",Advisory)
  const seo = peoplepage?.seo;
  // console.log(seo )
  return (
    <>
       <Seo seo={seo} />
      <PageBanner banners={banners} />
      <AboutPeople  aboutPeople ={aboutPeople}/>
      <AdvisoryBoard advisoryboard ={Advisory}/>
      <TeamLead teamlead ={teamlead} teamlist={teamlist} />
      <TeamMember memberlist={Memberlist} />
    </>
  );
};

export default people;


export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner.Image",
        "Overview",
        "Overview.Image",
        "TeamLeads",
        "TeamMembers",
        "AdvisoryBoard",
        "AdvisoryBoard.Image",
        "Teamlist.Image",
        "Memberlist.Image",
        "seo",
        "seo.metaImage",
        "seo.schema",
      ],
    };

    const query1String = qs.stringify(query1, {
      encodeValuesOnly: true,
    });

    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/people?${query1String}`;
    // console.log(`Final url: ${endpoint1}`);

    const response1 = await axios.get(endpoint1);
    const peoplepage = response1.data.data;

    return {
      props: { peoplepage },
    };
  } catch (error) {
    console.log("Error", error);
  }
}