import BlogPage from "@/components/blog";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/req";

async function Blog({ params: { slug } }) {
  const API_URL = process.env.NEXT_PUBLIC_API_URL;

  const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);

  // Get related blogs based on first tag
  let relatedBlogs = [];
  if (blog?.tag?.[0]?.id) {
    const tagId = blog.tag[0].id;
    const relatedResponse = await fetchReq(`${API_URL}/api/v1/blogs?page=1&limit=12&tag=${tagId}`);
    relatedBlogs = relatedResponse?.blogs || [];
  }

  return (
    <Layout>
      <BlogPage blog={blog} blogs={relatedBlogs} />
    </Layout>
  );
}

export default Blog;