import React from "react";
import MainLink from "../shared/main-link";
import { CardWrwpper } from "../shared/card";
import Container from "../shared/container";
import Image from "next/image";
import { getTranslations } from "next-intl/server";
import cupImg from "@/public/assets/img/Cup.png";
import { getHomeTopPalanProperyData } from "@/lib/serverActions";
import { Icon } from "@iconify/react";

const TopPlan = async ({ locale }: { locale: string }) => {
  const data = await getHomeTopPalanProperyData(locale);

 
  const t = await getTranslations("Header");
  
  return (
    <div data-aos="fade-up" data-aos-delay={100} data-aos-duration="800">
      <Container>
        <div className="flex  flex-col gap-8">
          <div className="flex  flex-col gap-4">
            <div className="flex items-center justify-between w-full ">
              <h6 className="text-[32px]">{t("topoffplanproperties")}</h6>
              <MainLink
                href="property-filter/properites"
                locale={locale}
                className="flex items-center gap-3 text-[16px] lg:text-2xl !text-primary"
              >
                {t("seeall")}
                <Icon
                  className="text-2xl text-primary"
                  icon="mynaui:arrow-right"
                />
              </MainLink>
            </div>
          </div>
          <div className="grid grid-cols-12 gap-5 w-full">
            {data?.data?.map((item: any, index: number) => {
              if (index < 3) {
                return (
                  <div
                    key={item.slug}
                    className="col-span-12 md:col-span-6 lg:col-span-4  gap-[21px] xl:col-span-4"
                  >
                    <CardWrwpper
                      place={{
                        id: item?.slug,
                        title: item?.title,
                        price: item?.price,
                        currency: "AED",
                        name: item?.city?.name,
                      }}
                      imgUrl={item?.cover?.original_url}
                      locale={locale}
                      className="!h-[380px] 2xl:!h-[479px]"
                    />
                  </div>
                );
              }
            })}
          </div>
        </div>
      </Container>
    </div>
  );
};

export default TopPlan;