import BlogCard from "@/app/components/blogs/BlogCard"
import BlogTags from "@/app/components/blogs/BlogTags"
import Container from "@/app/components/shared/container"
import { getBlog } from "@/lib/serverActions"
import Image from "next/image"
import { getTranslations } from "next-intl/server"
import { cache } from "react"
import { Metadata } from "next"


interface LayoutProps {
    params: Promise<{ locale: string | any, blog:string }> // Handle both promise and object
}
const getSingleBlog = cache(async (blogId:string, locale:string):Promise<any> => {
    

    const { data } = await getBlog(blogId, locale)

    return data 

})

export async function generateMetadata({params}:LayoutProps) : Promise<Metadata> {
    const { locale, blog } = await params
    const singleBlog = await getSingleBlog(blog,locale)
    return{
           title:singleBlog.title,
           description: singleBlog.description,
           openGraph:{
            images:[
                {
                    url:singleBlog.image.original_url,
                }
            ]
           }
    }
} 


export default async function BlogPage({ params }: LayoutProps) {
    // @ts-ignore
    const { locale, blog } = await params
    const t = await getTranslations("BlogPage") // استخدم getTranslations للـ server side

    const { data: blogData } = await getBlog(blog, locale)

    return (
        <>
            <div className="min-h-[438px] w-full pt-1">
                <Container className="mt-28 mb-20">
                    <h2 className="text-[24px] lg:text-5xl" data-aos="fade-down" data-aos-duration="800">{blogData?.title}</h2>

                    <div className="flex flex-col md:flex-row justify-between my-10" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                        <div>
                            <BlogTags tags={blogData.tags} />
                        </div>
                        <span>{blogData?.date}</span>
                    </div>

                    <div className="w-full h-[455px]" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="200">
                        <Image
                          loading="eager"
                            className="w-full h-full object-cover rounded-3xl"
                            src={blogData?.image.original_url}
                            alt={t("blog_image_alt")}
                            height={2000}
                            width={2000}
                        />
                    </div>

                    <div className="mt-10" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
                           <p className="text-gray-700 text-base line-clamp-3" dangerouslySetInnerHTML={{__html:blogData?.description}} />
                    </div>
                </Container>
            </div>
        </>
    )
}