import BlogCard from "@/app/components/blogs/BlogCard"
import Container from "@/app/components/shared/container"
import { HeaderWrwpper } from "@/app/components/shared/main-header"
import { getBlogs } from "@/lib/serverActions"
import { Icon } from "@iconify/react"
import { Metadata } from "next"
import { getTranslations } from "next-intl/server"

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("blogs.title"),
           description: t("blogs.description"),
    }
} 
export default async function BlogsPage({ params }: LayoutProps) {
    const { locale } = await params
    const t = await getTranslations("Header") // جلب الترجمة
    const { data: blogs } = await getBlogs(locale)

    return (
        <div className="min-h-[438px] w-full">
            <header>
                <HeaderWrwpper imgUrl={blogs?.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("Blogs")}</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("Blogs")}
                            </div>
                        </div>
                    </div>
                </HeaderWrwpper>
            </header>
            <Container className="mt-20">
                <div className="grid grid-cols-12 lg:gap-10">
                    {/* @ts-ignore */}
                    {blogs?.data?.map((blog, index) => (
                        <div key={index} className="w-full col-span-12 lg:col-span-4" 
                            data-aos="fade-up" 
                            data-aos-delay={index * 100}
                            data-aos-duration="800">
                            <BlogCard locale={locale} blogData={blog} />
                        </div>
                    ))}
                </div>
            </Container>
        </div>
    )
}