import ContactusForm from "@/app/components/contact-us/ContactusForm"
import Container from "@/app/components/shared/container"
import { HeaderWrwpper } from "@/app/components/shared/main-header"
import { getContactUs } from "@/lib/serverActions"
import { Icon } from "@iconify/react"
import { getTranslations } from "next-intl/server"

interface LayoutProps {
    params: Promise<{ locale: string | any }> // Handle both promise and object
}

export default async function ContactUsPage({ params }: LayoutProps) {
    const { locale } = await params
    const t = await getTranslations("Header") // جلب الترجمة

    const { data: contactUsData } = await getContactUs(locale)


    return (
        <div className="pt-1">
            <HeaderWrwpper imgUrl={contactUsData?.headerByImage?.image?.original_url}>
                <div className="flex flex-col items-center justify-center h-full w-full">
                    <div className="flex flex-col gap-6" data-aos="fade-down" data-aos-duration="1000">
                        <h1 className="text-[40px] font-medium text-center">{t("Contact Us")}</h1>
                        <div className="text-[14px] text-center font-[300px] flex items-center justify-center gap-2">
                            {t("Home")} <Icon className="text-2xl text-[#fff]" icon="weui:arrow-filled" />
                            {t("Contact Us")}
                        </div>
                    </div>
                </div>
            </HeaderWrwpper>

            <Container className="my-16" data-aos="fade-up" data-aos-duration="800">
                <ContactusForm data={contactUsData?.data} header={contactUsData.header} locale={locale} />
            </Container>
        </div>
    )
}