import Footer from "@/app/components/Footer";
import Navbar from "@/app/components/Navbar/Navbar";
import { articles } from "@/app/data/blogData";
import Image from "next/image";
import React from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import Link from "next/link";
import ShareBlog from "@/app/components/blogComponents/ShareBlog";
import RelatesBlogs from "@/app/components/blogComponents/RelatesBlogs";
import { baseUrl } from "@/lib/config";
async function getBlog(slug) {
  const res = await fetch(`${baseUrl}/api/blogs/${slug}`, {
    cache: "no-store", // SSR without caching (like getServerSideProps)
  });

  if (!res.ok) {
    throw new Error("Failed to fetch blog");
  }

  return res.json();
}

async function getRelatedBlogs(slug) {
  try {
    const res = await fetch(`${baseUrl}/api/related-blogs/${slug}`, { cache: "no-store" });
    if (!res.ok) throw new Error("Failed to fetch related Blogs");
    return res.json();
  } catch (err) {
    console.error("getRelatedBlogs error:", err);
    return [] ;  // safe fallback
  }
}

export default async function BlogDetailPage({ params }) {
  const { slug } = params;
  // const blog = articles.find((s) => s.slug === slug);
  const blog = await getBlog(slug);

 if (!blog) {
    return <div>Blog not found</div>;
  }  console.log(blog);
console.log('tdqyedqefd', blog.featuredImage.url)
      const relatedBlogs = await getRelatedBlogs(blog?.id)


  return (
    <div>
      <Navbar />
      <div className="mx-5 md:mx-[50px] lg:mx-[96px] my-5">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/">Home</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/blogs">Blogs</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>{blog?.slug}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        

        <h1 className="text-[20px] md:text-[25px] lg:text-[30px] font-semibold mt-4  leading-[30px] md:leading-[40px] lg:leading-[50px]">{blog?.title}</h1>
        <div className="flex items-center gap-3 md:gap-4 mt-1 md:mt-3">
          <p className="text-[14px] md:text-[16px] lg:text-[18px]">
            <span className="font-semibold">Author:</span> {blog?.author}
          </p>
          <p className="text-[14px] md:text-[16px] lg:text-[18px]">
            <span className="font-semibold">Date:</span> {blog?.date.split("T")[0]}
          </p>
          <p className="text-[14px] md:text-[16px] lg:text-[18px]">
            <span className="font-semibold">Category:</span> {blog?.category}
          </p>
          <p className="text-[14px] md:text-[16px] lg:text-[18px]">
            <span className="font-semibold">Reading Time:</span>{" "}
            {blog?.readingTime}
          </p>
        </div>
        <div className="relative w-full h-[400px]  md:min-h-[500px] lg:min-h-[600px] rounded-2xl my-8">
          <Image
            src={blog?.featuredImage?.url}
            alt={blog?.featuredImage?.alt}
            fill
            className="rounded-2xl"
          />
        </div>
       <div className="blog-html"
        dangerouslySetInnerHTML={{ __html: blog?.content }}
      />
      </div>
      <ShareBlog />
      <RelatesBlogs relatedBlogs={relatedBlogs} />
      <Footer />
    </div>
  );
};

