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 LeftSideImage from "../Corpedia/LeftSideImage";
import RightSideImage from "../Corpedia/RightSideImage";

const Careers = ({ CareerPage }) => {
  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 seo = CareerPage?.seo;
  // console.log(seo, "seo")

  return (
    <>
      <Seo seo={seo} />
      <PageBanner banners={banners} />
      {/* <CareerListing /> */}
      <section className="ptb-100">
        <Container>
          <Row className="justify-content-center text-center">
            <Col md={10}>
              <h3 className="text-center">
                We're more than just a workplace. We're a family.
              </h3>
              <p className="text-center">
                We know that finding a meaningful and rewarding job can be a
                long journey. Our goal is to make that process as easy as
                possible for you, and to create a work environment that's
                satisfying - one where you'll look forward to coming to every
                day. Start your journey with us by browsing available jobs.
              </p>
              <Link
                href="https://advithconsulting.zohorecruit.in/careers"
                target="_blank"
              >
                <button className="default-btn mt-4">
                  Browse Jobs <i className="ri-arrow-right-line"></i>
                </button>
              </Link>
            </Col>
          </Row>
        </Container>
      </section>

      <div className="cfo-services-area ptb-100">
        <section className="cfo-page">
          {dynamicdata &&
            dynamicdata?.map((section, index) => {
              console.log("section", section);
              switch (section.__component) {
                case "dynamic-zone.about":
                  return (
                    <LeftSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                case "dynamic-zone.background":
                  return (
                    <RightSideImage
                      title={section?.Title}
                      subtitle={section?.Subtitle}
                      image={section?.Image}
                      content={section?.Content}
                    />
                  );
                default:
                  return null;
              }
            })}
        </section>
      </div>
    </>
  );
};

export default Careers;

export async function getServerSideProps() {
  try {
    const query1 = {
      populate: [
        "Banner.Image",
        "CareerDetails",
        "CareerDetails.Image",
        "CareerDetails.Heading",
        "seo",
        "seo.metaImage",
        "seo.schema",
      ],
    };

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

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

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

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