import FeaturedSection from "@/components/homePage/FeaturedSection"
import HeroHome from "@/components/homePage/HeroHome"
import JoinSection from "@/components/homePage/JoinSection"
import LastNewsSection from "@/components/homePage/LastNewsSection"
import LastPro from "@/components/homePage/LastPro"
import PopularSection from "@/components/homePage/PopularSection"

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

import { getHomeData } from "@/lib/serverActions"
import { Metadata } from "next"
import { getTranslations } from "next-intl/server"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("seo");
  return {
    title: t("home.title"),
    description: t("home.description"),
    keywords: [
      t("home.real_estate_Dubai"),
      t("home.property_investment_UAE"),
      t("home.Dubai_real_estate_consultancy"),
      t("home.off_plan_properties"),
      t("home.luxury_homes_Dubai"),
      t("home.ready_properties_UAE"),
    ].join(", "),
  };
}
export default async function Home({ params }: LayoutProps) {
  const { locale } = await params;
  const homeData = await getHomeData(locale);
 
  
  return (
    <>
       <div className=" mx-auto mb-[120px]">
        <HeroHome locale={locale} homeData={homeData?.data?.sliders?.locales} images={homeData?.data?.sliders?.images} />
        <div className="flex flex-col gap-[48px] md:gap-[120px] ">
          <LastPro homeData={homeData?.data?.["latest-projects"]?.header}
           homeData2={homeData?.data?.["latest-projects"]?.data} />
          <PopularSection locale={locale} homeData={homeData?.data?.["popular-area"]}/>
          <JoinSection />
          <FeaturedSection locale={locale} homeData={homeData?.data?.["feature-properties"]}/>
          <LastNewsSection homeData={homeData?.data?.["blog"]} />

        </div>
      </div>
     </>
  );
}