import { CardWrwpper } from "@/app/components/shared/card"
import Container from "@/app/components/shared/container"
import { HeaderWrwpper } from "@/app/components/shared/main-header"
import MainLink from "@/app/components/shared/main-link"
import { getAllAreasData } from "@/lib/serverActions"
import Image from "next/image"
import { Icon } from "@iconify/react"
import { getTranslations } from "next-intl/server"

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

export default async function AreasPage({ params }: LayoutProps) {
    const { locale } = await params
    const t = await getTranslations("Header") // استخدم getTranslations للـ server side

    const { data: areas } = await getAllAreasData(locale)

    const developerData = {
        name: "developer",
    }

    const data = [developerData, developerData, developerData, developerData, developerData, developerData]

// npm, react, next, tailwind
    
    return (
        <div className="min-h-[438px] w-full">
            <HeaderWrwpper imgUrl={areas?.headerByImage?.image?.original_url}>
                <div className="flex flex-col items-center justify-center h-full w-full">
                    <div className="flex flex-col gap-6" data-aos="fade-down" data-aos-duration="1000">
                        <h1 className="text-[40px] font-medium text-center">{t("areas_title")}</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("areas")}
                        </div>
                    </div>
                </div>
            </HeaderWrwpper>
            <Container className="my-20">
                <div className="grid grid-cols-12 gap-10 w-full">
                    {areas?.data?.map((area: any, index: any) => {
                        return (
                            <div key={index} className="col-span-12 lg:col-span-4 xl:col-span-4" 
                                data-aos="fade-up" 
                                data-aos-delay={index * 100}
                                data-aos-duration="800">
                                <CardWrwpper imgUrl={area?.image?.original_url} className="!h-[253px]">
                                    <div className="flex flex-col gap-4 justify-end z-40 p-4 absolute top-0 left-0 h-full w-full">
                                        <div className="flex gap-2">
                                            <div className="flex flex-col gap-1">
                                                <h5 className="text-6 font-medium">{area?.name}</h5>
                                                <h5 className="text-[16px]">
                                                    {area?.products_count} {t("property")}
                                                </h5>
                                                <p className="translate-y-[100px] h-0 group-hover:translate-y-[-8px] group-hover:h-auto transition-all duration-500 mt-2">
                                                    {area?.description}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </CardWrwpper>
                            </div>
                        )
                    })}
                </div>
            </Container>
        </div>
    )
}