import PropertyCard from "@/components/homePage/PropertyCard";
import Banner from "@/components/reusableComponent/Banner";
import Container from "@/components/reusableComponent/Container";
import { getSingleDevelopersData } from "@/lib/serverActions";
import bannerImage from "@/public/defaultimg.png";
import { PageProps } from "@/types/page";
import { PropertyItem } from "@/types/property";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";

export async function generateMetadata({ params }: any): Promise<Metadata> {
  const { locale, slug } = await params;
  const singleDeveloper = await getSingleDevelopersData(locale, slug);

  return {
    title: singleDeveloper?.data?.locales?.name,
    description: singleDeveloper?.data?.locales?.description,
    openGraph: {
      images: [
        {
          url: singleDeveloper?.data?.image?.image,
        },
      ],
    },
  };
}

export default async function SingleDeveloperPage({ params }: PageProps) {
  const { locale, slug } = await params;
  const t = await getTranslations("Developers");
  const data = await getSingleDevelopersData(locale, slug);

  const profileImage = data?.data?.image?.image;
  const coverImage = data?.data?.cover?.image;
  const developerName = data?.data?.locales?.name;
  const developerDes = data?.data?.locales?.description;
  const property: PropertyItem[] = data?.data?.property;

  return (
    <>
      <Banner
        img={coverImage || bannerImage}
        title={developerName}
        img2={profileImage || bannerImage}
        // title={t("title")}
      />
      <Container className="mb-[120px]">
        {/* <SectionTitle className="py-5" title={t("title")} description={t("title")} /> */}
        <div className="my-12 text-paragraph">
          <h3 className="text-2xl font-medium mb-4 text-dark">
            {t("Overview")}
          </h3>
          <p dangerouslySetInnerHTML={{ __html: developerDes }} />
        </div>
        <div className="">
          <div className="flex justify-between w-full ">
            <h3 className="text-[16px] lg:text-[24px] font-normal text-dark">
              {t("Properties")}
            </h3>
            <h4 className="text-paragraph text-[16px] lg:text-[24px] font-light">
              {" "}
              {data?.data?.properties_count} {t("Property")}
            </h4>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-5">
            {property.map((item) => {
              return <PropertyCard key={item.id} item={item} />;
            })}
          </div>
        </div>
      </Container>
    </>
  );
}

// -------------------------------