---
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 [];
  }
}
---
<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={blogData?.schema1?.replaceAll("\n", "")} newSchema2={blogData?.schema2?.replaceAll("\n", "")} newSchema3={blogData?.schema3?.replaceAll("\n", "")}>
  <SingleBlog client:only="react" blog={blogData} />
</Layout>