import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import { Col, Container, Row } from "react-bootstrap";
import Link from "next/link";
import { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";

const index = ({ CareerPage ,conversionData }) => {
  console.log(CareerPage, "CareerPage");
  const banners = [
    {
      imageSrc: cleanImage(CareerPage?.Banner?.Image?.url),
      pageTitle: CareerPage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: CareerPage?.Banner?.Heading,
    },
    // Add more banners as needed
  ];
  const code = conversionData?.conversion;

  const seo = CareerPage?.seo;
  // console.log(seo, "seo")
  return (
    <>
        <Seo seo={seo} />
      <PageBanner banners={banners} />
      <ConversionCode code={code} />

      {/* <CareerListing /> */}
      <section className="ptb-100">
        <Container>
          <Row className="justify-content-center text-center">
            <Col md={10}>
              <h3 className="text-center">{CareerPage.Heading}</h3>
              <p className="text-center">{CareerPage.Description}</p>
              <Link
                href={CareerPage?.Btn_link || "#"}
                target={
                  CareerPage?.Btn_link &&
                  CareerPage?.Btn_link.startsWith("http")
                    ? "_blank"
                    : "_self"
                }
                rel={
                  CareerPage?.Btn_link &&
                  CareerPage?.Btn_link.startsWith("http")
                    ? "noopener noreferrer"
                    : ""
                }
              >
                <button className="default-btn mt-4">
                  Browse Jobs <i className="ri-arrow-right-line"></i>
                </button>
              </Link>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
};

export default index;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: ["Banner.Image"],
    };
    const query2 = {
      populate: ["conversion"],
    };

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

    const query12String = qs.stringify(query2, {
      encodeValuesOnly: true,
    });
    const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/career-page?${query1String}`;
    const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
    
    // console.log(`Final url: ${endpoint1}`);

    const [response1, response2] = await Promise.all([
      axios.get(endpoint1),
      axios.get(endpoint2),
    ]);

    const CareerPage = response1.data.data;
    const conversionData = response2.data.data;
    return {
      props: { CareerPage ,conversionData },
    };
  } catch (error) {
    console.log("Error", error);
  }
}