import Container from "@/components/reusableComponent/Container"
import { getSingleBlogData } from "@/lib/serverActions"
import { formatedDate } from "@/lib/utils";
import { formatedDateAr } from "@/lib/utils";
import Image from "next/image"
import img from "@/public/assets/blog/blog-big-1.webp"
import { PageProps } from "@/types/page";
 
export default async function SingleBlog({ params } : PageProps) {
    const { locale , slug } = await params
    const data = await getSingleBlogData(locale,slug)
    
    return (
        <Container className="mb-[120px] flex flex-col items-start w-full lg:w-[55%] gap-8 xl:!px-0 lg:!px-0
">
            <div className="flex flex-col items-start gap-6">
                <span className=" ltext-[35px] xl:text-[40px]  text-dark font-normal ">{data?.data?.locales?.name}</span>
                <span className="text-paragraph text-[15px] xl:text-[20px] font-light ">
                    
                    {locale === "en" ? formatedDate(data?.data?.["created_at"]) : formatedDateAr(data?.data?.["created_at"])}
                    
                    
                    
                    </span>
            </div>

            <Image
                src={data?.data?.image?.image ?? img }
                width={792}
                height={463}
                alt="img"
                className="w-full h-[463px] object-cover"
            />
            <div className=" flex flex-col gap-4">
                <p
                    className="text-[15px] xl:text-[20px]  text-dark font-extralight"
                    dangerouslySetInnerHTML={{ __html: data?.data?.locales?.["short_description"] }}
                />

                <div className="flex flex-col gap-1">
                    <span className="text-dark lg:text-[15px] xl:text-[20px]  font-normal">{data?.data?.locales?.name}</span>
                    <p
                        className="text-dark text-[15px] xl:text-[20px]  font-extralight"
                        dangerouslySetInnerHTML={{ __html: data?.data?.locales?.description }}
                    />
                </div>
            </div>
        </Container>
    )
}






















































// import Container from "@/components/reusableComponent/Container"

// // export async function generateMetadata({ params }: any): Promise<Metadata> {
// //   const { locale, slug } = await params;
// //   const singleBlog = await getSingleBlogData(slug, locale);
// //   return {
// //     title: singleBlog?.data?.title,
// //     description: singleBlog?.data?.description,
// //     openGraph: {
// //       images: [
// //         {
// //           url: singleBlog?.data?.image?.original_url,
// //         },
// //       ],
// //     },
// //   };
// // }

// export default async function Page({ params }: any) {
//     //   const { locale, slug } = await params;
//     //   const t = await getTranslations("blog");

//     //   const data = await getSingleBlogData(slug, locale);
//     // console.log("blog-data", data);

//     return (
//         <Container className="!pt-[100px]">
//             {/* {data?.data?.images?.length === 1 && (
//         <Banner
//           img={data?.data?.images?.[0]?.original_url|| defaultimg}
//           title={""}
//           description={""}
//           withoutShadow
//         />
//       )}
//       {data?.data?.images?.length > 1 && (
//         <HomeSlider imagesOnly data={data?.data} />
//       )} */}

//             <div>
//                 <span className="text-base font-light mb-4">{"data?.data?.date"}</span>
//                 <h3 className="text-[18px] lg:text-[40px] lg:font-medium">{"data?.data?.title"}</h3>
//             </div>

//             {/* <Banner
//         // img={data?.data?.images?.[0]?.original_url || defaultimg}
//         img={data?.data?.image?.original_url || defaultimg}
//         title={""}
//         description={""}
//         classNameWrapper="!pt-[30px]"
//         withoutShadow
//       /> */}

//             <div className="mt-[35px]">{/* <p dangerouslySetInnerHTML={{ __html: data?.data?.description }} /> */}</div>
//         </Container>
//     )
// }