"use client";
/* 
  This is the page banner title component.
  It contains the following components:
  - Link
  - usePathname
*/
import Routes from '@/src/utils/RouteConstants';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import styles from "./PageBannerTitle.module.scss";

// Define the static content type for the PageBannerTitle component
interface PageBannerTitleProps {
    CommonDetails: {
        BannerTitle?: string;
        BannerLink?: string;
        BannerLinkText?: string;
        EffectiveDate?: string;
        EffectiveDateText?: string;
    };
}
const PageBannerTitle = ({ CommonDetails }: PageBannerTitleProps) => {
    const pathname = usePathname();

    // check if the current page is one of the pages that should have a white background
    const whiteBackgroundPages = new Set([
        Routes.CONTACT,
        Routes.ABOUT,
        Routes.FAQS,
        Routes.PRIVACY_POLICY,
        Routes.TERMS_OF_SERVICES
    ]);

    const shouldUseWhiteBackground = whiteBackgroundPages.has(pathname);

    return (
        <>
            <section className={`${styles.PageBannerTitleWrapper} ${shouldUseWhiteBackground ? "lg:!bg-white" : ""} py-[30px] sm:py-[40px] lg:py-[65px] xxxl:py-[75px]`}>
                <div className={`container`}>
                    <div className={`flex gap-[20px] md:gap-[40px] items-center justify-between`}>
                        <h1 className="!m-0">{CommonDetails.BannerTitle}</h1>
                        {(CommonDetails.BannerLink && CommonDetails.BannerLinkText) ? (
                            <Link className={`${styles.BannerHeaderLink} relative flex-shrink-0 sm:mr-[40px]`} href={CommonDetails.BannerLink}>
                                <span className={`${styles.RoundSpan} inline-flex items-center justify-center rounded-full w-[60px] h-[60px] sm:w-[100px] sm:h-[100px] lg:w-[120px] lg:h-[120px]`}>
                                    <i className={`${styles.RightArrowIcon} Icon w-[25px] h-[25px] sm:w-[30px] sm:h-[30px] lg:w-[40px] lg:h-[40px]`}></i>
                                </span>
                                <span className={`${styles.BtnText} ${shouldUseWhiteBackground ? "lg:!bg-white" : ""} hidden py-[9px] px-[5px] sm:inline sm:absolute sm:max-w-[65px] lg:max-w-[75px] z-[1] top-[-7px] right-[-40px]`}>
                                    {CommonDetails.BannerLinkText}
                                </span>
                            </Link>
                        ) : null}
                    </div>
                    {CommonDetails.EffectiveDate && (
                        <p className={`!mt-2.5 md:!mt-6 xl:!mt-8 text-grey667Color !font-normal`}>
                            {CommonDetails.EffectiveDateText}: {CommonDetails.EffectiveDate}
                        </p>
                    )}
                </div>
            </section>
        </>
    );
};

export default PageBannerTitle;