---
import Layout from "../../layouts/Layout.astro";
import SingleBlog from "../../components/Blogs/SingleBlog";

const BLOG_API_URL = "https://curriculum-app-api.beanstalkedu.com/items/blog";
const { id } = Astro.params;
let blogData = null;

try {
  const response = await fetch(`${BLOG_API_URL}?filter[status][_eq]=published&filter[property][_eq]=aKadmy&filter[slug][_eq]=${id}`);
  
  if (!response.ok) {
    throw new Error(`Failed to fetch blog. Status: ${response.status}`);
  }

  const data = await response.json();
  blogData = data.data[0]; // Assuming single result
} catch (error) {
  console.error('Error fetching blog:', error);
}

export async function getStaticPaths() {
  const BLOG_API_URL = "https://curriculum-app-api.beanstalkedu.com/items/blog";
  try {
    const response = await fetch(`${BLOG_API_URL}?filter[status][_eq]=published&filter[property][_eq]=aKadmy`);
    const data = await response.json();
    
    const paths = data.data.map((blog: { slug: string }) => ({
      params: { id: blog.slug },
    }));

    return paths;
  } catch (error) {
    console.error('Error generating static paths:', error);
    return [];
  }
}
// console.log('blogData000', blogData, `https://akadmyapp.com/blogs/${id}`)

// const schema1 = blogData.schema1.replaceAll("\n", "");
const schema1 = blogData?.schema?.replaceAll("\n", "");
const schema2 = blogData?.schema2?.replaceAll("\n", "");
const schema3 = blogData?.schema3?.replaceAll("\n", "");
---
<Layout 
    title={blogData?.title ?? 'Blog | Akademy'} 
    description={blogData.meta_description} 
    canonicalUrl={`https://akadmyapp.com/blogs/${id}`} 
    ogImage={`https://management.beanstalkedu.com/assets/${blogData?.og_img}`} 
    ogUrl={'https://akadmyapp.com'} 
    newSchema1={schema1} 
    newSchema2={schema2} 
    newSchema3={schema3}>

  <SingleBlog client:only="react" blog={blogData} />
</Layout>