/*
  This page is for the payment.
  It includes a breadcrumb with a link to the home page.
  It also includes a section with the payment.
  It also includes a section with the booking summary.
*/
import Breadcrumb from '@/src/components/Breadcrumb'
import Payment from '@/src/components/page/FindAHome/Payment/Payment'
import Routes from '@/src/utils/RouteConstants'
import { getCapitalizeHyphenated } from '@/src/utils/commonFunctions'
import React from 'react'
import styles from './page.module.scss'
import { getDictionarys } from '@/getDictionarys'
import { BookingContent } from '@/src/types/StaticContent/booking.content.type'
import { PropertyDetailContent } from '@/src/types/StaticContent/propertydetail.content.type'

// Slug params  
interface SlugParams {
    params: {
        slug: string;
        bookingId: string;
    };
    searchParams: { [key: string]: string | string[] | undefined };
}

const page: React.FC<SlugParams> = async ({ params, searchParams }) => {
    const { slug, bookingId } = await params;
    const searchParamsObj = await searchParams;
    const referrer = searchParamsObj.referrer as string;
    const BOOKING = await getDictionarys('booking') as BookingContent;
    const PropertyDetailContent = await getDictionarys('property-detail') as PropertyDetailContent;

    // Get the home content
    // const ReviewAndPayment = await getDictionary('Review_And_Payment') as any;

    let breadcrumbData = [];
    if (referrer === 'home') {
        breadcrumbData = [
            {
                Link: 'Home',
                LinkUrl: Routes.HOME
            },
            {
                Link: 'Find a home',
                LinkUrl: Routes.FIND_A_HOME
            },
            {
                Link: getCapitalizeHyphenated(slug),
                LinkUrl: Routes.FIND_A_HOME_INFO(slug)
            },
            {
                ActiveLink: 'Review and Payment'
            }
        ]
    } else {
        breadcrumbData = [
            {
                Link: 'Find a home',
                LinkUrl: Routes.FIND_A_HOME
            },
            {
                Link: getCapitalizeHyphenated(slug),
                LinkUrl: Routes.FIND_A_HOME_INFO(slug)
            },
            {
                ActiveLink: 'Review and Payment'
            }
        ]
    }

    return (
        <main className={`${styles.BookingWrapper} bg-bgColor main-mt pb-[30px] sm:pb-[40px] lg:pb-[50px] xxl:pb-[65px]`}>
            <section className={`${styles.BookingContentWrap}`}>
                <div className={`container`}>
                    <Breadcrumb content={breadcrumbData} />
                    <Payment bookingId={bookingId} slug={slug} BOOKING={BOOKING} PropertyDetailContent={PropertyDetailContent} />
                </div>
            </section>
        </main>
    )
}

export default page