---
import Layout from "../../layouts/Layout.astro"
import Header from "../../components/Header.astro"
import MainMenu from "../../components/MainMenu.astro"
import Footer from "../../components/Footer.astro"

export async function getStaticPaths() {
  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
  const data = await response.json();
  const finalData = data.data.map((n: {slug: string | undefined;})=>{
      return {params: {id:n.slug}}
  }) 
  return finalData;
}

const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
const data = await response.json();
const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
---
<Layout title="">
    <Header />
    <MainMenu />
    <main>
        <div class="container bg-white mx-auto mt-3  p-4">
            <div v-if="isLoading">
                <!-- <h2>Loading ...</h2> -->
            </div>
            <div>
                <!-- <h2 class="text-center t-8">{data.data[idx].title}</h2> -->
                <div></div>
                <div >
                    <!-- <h2>Attachments.</h2> -->
                    <div>
                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
                        <a href=""></a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <Footer />
</Layout>

    
   