/*
  Contact Us Page
  - Form for contact us 
*/
import { getDictionarys } from '@/getDictionarys';
import ContactUsForm from '@/src/components/Form/ContactUsForm/ContactUsForm';
import PageBannerTitle from '@/src/components/PageBannerTitle';
import { ContactUsContent } from '@/src/types/StaticContent/contactus.content.type';
import Image from 'next/image';
import React from 'react';
import ContactUsImg from '../../../../../public/images/contact-us.svg';
import styles from './page.module.scss';

const page: React.FC = async () => {
  // Get the contact us content
  const ContactUsContent = await getDictionarys('contact-us') as ContactUsContent;

  // Banner Content
  const BannerDetails = {
    BannerTitle: ContactUsContent.TITLE,
    BannerLink: "",
    BannerLinkText: ""
  };


  return (
    <>
      <main className={`main-mt mb-[30px] pb-[30px] sm:pb-[40px] lg:pb-[50px] xxl:pb-[65px]`}>
        <PageBannerTitle CommonDetails={BannerDetails} />
        <section>
          <div className={`container`}>
            <div className={`flex justify-between flex-wrap flex-col-reverse lg:flex-row lg:flex-nowrap gap-[25px] lg:gap-[30px] xl:gap-[40px] xxl:gap-[50px] items-center mt-[20px] lg:mt-0`}>
              {/* Form Wrapper Start */}
              <div className={`${styles.FormWrap} bg-bgColor w-full lg:w-[60%] py-[28px] px-[16px] md:px-[20px] rounded-[12px]`}>
                <ContactUsForm FormContent={ContactUsContent.FORM} />
              </div>
              {/* Form Wrapper End */}
              {/* Image Wrapper Start */}
              <div className={`m-auto max-w-[390px] md:max-w-[450px] xl:max-w-[520px] xxl:max-w-[600px] h-full w-full`}>
                <Image className={`w-full`} src={ContactUsImg} alt="Contact Us" layout="responsive" />
              </div>
              {/* Image Wrapper End */}
            </div>
          </div>
        </section>
      </main>
    </>
  )
}

export default page