import { CardWrwpper } from "@/app/components/shared/card"
import Container from "@/app/components/shared/container"
import { getDeveloper } from "@/lib/serverActions"
import Image from "next/image"
import { getTranslations } from "next-intl/server"
import Divider from "@/app/components/shared/Divider"
import { Metadata } from "next"
import { cache } from "react"

interface LayoutProps {
    params: Promise<{ locale: string | any; developer: string | any }> // Handle both promise and object
}
const getSingleDeveloper = cache(async (developer:string, locale:string):Promise<any> => {
    

    const {data} = await getDeveloper(developer, locale);
  
    return data 
  
  })
  
  export async function generateMetadata({params}:LayoutProps) : Promise<Metadata> {
    const { locale, developer } = await params
    const singleDeveloper = await getSingleDeveloper(developer,locale)
    return{
           title:singleDeveloper.name,
           description: singleDeveloper.description,
           openGraph:{
            images:[
                {
                    url:singleDeveloper.image.original_url,
                }
            ]
           }
    }}
export default async function DeveloperPage({ params }: LayoutProps) {
    const { locale, developer } = await params
    const t = await getTranslations("Header") // جلب الترجمة

    const { data: developerDatax } = await getDeveloper(developer, locale)
    const image = developerDatax?.image?.original_url
    const description = developerDatax?.description
    const name = developerDatax?.name


  

    return (
        <div className="min-h-[438px] w-full">
            <div
                className="bg-[url('/assets/img/singleProperty.png')] bg-no-repeat bg-cover bg-center min-h-[240px] relative"
                style={{
                    boxShadow: "inset 0 120px 80px -80px black",
                }}
            >
                <div className="flex items-center justify-center flex-col absolute top-1/2 left-1/2 transform -translate-x-1/2 ">
                    <Image
                      loading="eager"
                        src={image}
                        className="w-[185px] object-cover h-[185px] rounded-full border-2 border-white shadow-xl mb-5"
                        alt={name}
                        width={500}
                        height={500}
                        data-aos="zoom-in"
                        data-aos-duration="800"
                    />
                    <h2 
                        className="text-[32px] font-medium mx-auto text-center"
                        data-aos="fade-up"
                        data-aos-duration="800"
                        data-aos-delay="200"
                    >{name}</h2>
                </div>
            </div>
                <Container className="mb-20">
                    <div 
                        className="mt-52 pb-10 "
                        data-aos="fade-up"
                        data-aos-duration="800"
                        >
                        <h3 className="text-[28px] capitalize mb-4">{t("Description")}</h3>
                        <p className="text-paragText leading-8">{description}</p>
                    </div>
                        {developerDatax?.products?.length > 0 && (
                            <>
                            <Divider className="border-gray-300"/>
 <div className="mt-10 ">
 <div 
     data-aos="fade-up"
     data-aos-duration="800"
 >
     <h3 className="text-[28px] mb-4">{t("Listed Properties")}</h3>
     <span className="block text-paragText text-xl mb-5">
         {developerDatax?.products?.length} {t("Listings")}
     </span>
 </div>
 <div className="grid grid-cols-12 gap-4">
     {developerDatax?.products?.map((property: any, index: number) => (
         <div 
             key={index} 
             className="col-span-12 md:col-span-4"
             data-aos="fade-up"
             data-aos-duration="800"
             data-aos-delay={index * 100}
         >
             <CardWrwpper
                 className="col-span-12 md:col-span-2 lg:col-span-4 xl:col-span-4 !h-[300px] 2xl:!h-[479px]"

                 place={{
                     id: property.slug,
                     title: property.title,
                     name: property?.city?.name,
                     price: property?.price,
                     currency: "AED",
                 }}
                 imgUrl={property.cover.original_url}
                 locale={locale}
             />
         </div>
     ))}
 </div>
</div>
</>
                )}
                   
                </Container>
        </div>
    )
}