"use client"
import { useState } from "react"
import FilterSideMenu from "../filter/components/FilterSideMenu"
import { HeaderWrwpper } from "../shared/main-header"
import Filter from "../filter"
import { Icon } from "@iconify/react"
import { useTranslations } from "next-intl"

function PropertyFilter({
    formOptions,
    pageHeader,
    filterType,
    locale,
}: {
    formOptions: any
    pageHeader: string
    filterType: string
    locale: string
}) {
    const t = useTranslations("ContactusForm") // استخدم useTranslations للـ client side

    const [openSideFilter, setOpenSideFilter] = useState(false)
    return (
        <>
            <FilterSideMenu
                slug={filterType}
                formOptions={formOptions}
                open={openSideFilter}
                setOpen={setOpenSideFilter}
                locale={locale}
            />
            <header>
                <HeaderWrwpper imgUrl="/header.png">
                    <div className="flex flex-col items-center justify-center h-full w-full">
                        <div className="flex flex-col gap-2 lg:gap-6 mt-[-90px] lg:mt-0">
                            <h1 className=" text-[24px] text-center lg:text-start lg:text-[40px]  font-medium ">
                                {pageHeader !== "properites" && pageHeader} {t("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(filterType) ? t(filterType) : "properites"}
                            </div>
                        </div>
                    </div>

                    <Filter
                        locale={locale}
                        filterType={filterType}
                        formOptions={formOptions}
                        setOpen={setOpenSideFilter}
                    />
                </HeaderWrwpper>
            </header>
            {openSideFilter && (
                <div
                    className={`fixed top-0 left-0 right-0 bottom-0 bg-[#00000000]/20 z-[888] duration-500`}
                    onClick={() => setOpenSideFilter(false)}
                ></div>
            )}
        </>
    )
}

export default PropertyFilter