"use client";
/* 
  This is the about blankbase component.
*/
import { CMSData } from '@/src/types/api/cms.type';
import { AboutUsContent } from '@/src/types/StaticContent/aboutus.content.type';
import ImagesConstants from '@/src/utils/ImagesConstants';
import Routes from '@/src/utils/RouteConstants';
import { renderSafeHtml } from '@/src/utils/sanitizeHTML';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import styles from './AboutBlankbase.module.scss';

const AboutBlankbase = ({ AboutBlankbaseData, AboutCMSData }: { AboutBlankbaseData: AboutUsContent['ABOUT_BLANKBASE'], AboutCMSData: CMSData['description'] }) => {
    // Get the current pathname
    const pathname = usePathname();
    // Check if the current page is the home page
    const isHomePage = pathname === Routes.HOME;
    // Check if the current page is the about page
    const isAboutPage = pathname === Routes.ABOUT;
    return (
        <>
            <section className={`${styles.AboutBlankbaseWrapper} ${isHomePage ? "bg-secondaryColor" : ""} ${isAboutPage ? "bg-bgColor" : ""} py-[30px] sm:py-[40px] lg:py-[50px] xxl:py-[65px]`}>
                <div className={`container`}>
                    <h2 className={`!mb-2 sm:!mb-2.5 md:!mb-4 lg:!mb-5`}>{AboutBlankbaseData.TITLE}</h2>
                    <div className={`flex flex-wrap lg:flex-nowrap items-end justify-between gap-[20px] md:gap-[30px] lg:gap-[40px] xxl:gap-[50px]`}>
                        {/* About Img */}
                        <div className={`w-full lg:max-w-[100%] xl:max-w-[530px] xxxl:max-w-[600px]`}>
                            <Image className={`w-full`} width={100} height={100} src={ImagesConstants.ABOUT_IMG} alt='about-us' />
                        </div>
                        {/* About Content */}
                        <div className={`w-full lg:max-w-[100%] xl:max-w-[470px] xxl:max-w-[530px] xxxl:max-w-[600px]`}>
                            <div className={`flex flex-col justify-end h-full`}>
                                {renderSafeHtml(AboutCMSData)}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default AboutBlankbase