import Filter from "@/app/components/filter"
import { HeaderWrwpper } from "@/app/components/shared/main-header"
import PhoneValidationExample from "@/app/components/shared/PhoneInput"
import { getTranslations } from "next-intl/server"
import { Icon } from "@iconify/react"

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

const Page = async ({ params }: LayoutProps) => {
    const { locale } = await params
    const t = await getTranslations("Header")

    return (
        <>
            <div className="mt-[1000px]"></div>
            <PhoneValidationExample />

            <header className="relative ">
                <HeaderWrwpper imgUrl="/header.png">
                    <div className="flex flex-col items-center justify-center h-full w-full">
                        <div className="flex flex-col gap-6">
                            <h1 className="text-[40px] font-medium text-center">{t("Top Ready to Move Properties")}</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("Ready to Move")}
                            </div>
                        </div>
                    </div>
                </HeaderWrwpper>
                <Filter locale={locale} />
            </header>
        </>
    )
}

export default Page