import React from 'react';
import PageBanner from '@/components/reuseables/PageBanner';
import ContactInfo from '@/container/Contact/ContactInfo';
import ContactForm from '@/container/Contact/ContactForm';
import { cleanImage } from '@/layout/imageHandling';
import axios from 'axios';
import qs from 'qs';
import Seo from '@/components/reuseables/Seo/Seo';

export default function Contact({ Contactpage }) {
  // console.log("conatct", Contactpage)
  const banners = [
    {
      imageSrc: cleanImage(Contactpage?.Banner?.Image?.url),
      pageTitle: Contactpage?.Banner?.Heading,
      homePageUrl: "/",
      homePageText: "Home",
      activePageText: Contactpage?.Banner?.Heading,
    },
  ];

  const seo = Contactpage?.seo;
  // console.log(seo)

  return (
    <>
    <Seo seo={seo} />
      <PageBanner banners={banners} />
      <ContactInfo />
      <ContactForm />
    </>
  );
}

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

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

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

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

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