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

interface LayoutProps {
    params: Promise<{ locale: string | any }> // Handle both promise and object
}
export async function generateMetadata() : Promise<Metadata> {
    const t = await getTranslations("meta")
    return{
           title: t("developers.title"),
           description: t("developers.description"),
    }
} 
export default async function DevelopersPage({ params }: LayoutProps) {
    const { locale } = await params
    const t = await getTranslations("Header") // استخدم getTranslations للـ server side

    const { data: developers } = await getDevelopers(locale)
 

    const developerData = {
        name: "developer",
    }

    return (
        <div className="min-h-[438px] w-full">
            <HeaderWrwpper imgUrl={developers?.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-up" data-aos-duration="800">
                        <h1 className="text-[40px] font-medium text-center">{t("developers_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("developers")}
                        </div>
                    </div>
                </div>
            </HeaderWrwpper>

            <section className="text-white py-10 px-5 lg:px-0">
                <Container className="overflow-hidden">
                    <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-7 ml-5 mt-10 mr-10">
                        {/* <DeveloperSlider data={[...developers?.data]} locale={locale} /> */}
                        {developers?.data?.map((item: any, index: number) => (
                            <div 
                                key={index} 
                                className="rounded-xl  w-full border border-primary"
                                data-aos="fade-up"
                                data-aos-duration="800"
                                data-aos-delay={index * 100}
                            >
                                <MainLink
                                    locale={locale}
                                    href={`developers/${item?.slug}`}
                                    className="text-center scale_animation_developer min-h-[100px] !w-full flex items-center justify-center text-2xl px-5 rounded-xl !text-primary"
                                >
                                    {item?.name}
                                </MainLink>
                            </div>
                        ))}
                    </div>
                </Container>
            </section>
        </div>
    )
}