---
import LayoutBN from '../../../layouts/LayoutBN.astro';
export async function getStaticPaths() {
  const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=technology&filter[lang][_eq]=bengali');
  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://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=technology&filter[lang][_eq]=bengali');
const data = await response.json();
const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items  = data.data[idx];
// console.log(data.data[idx])
---
<LayoutBN title={items.title}>
    <main>
        <section class="container mx-auto px-4 mt-16">
            <div class="flex flex-col">
                <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
                <h2 class="text-xl py-2">{items.title}</h2>
                <img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
                <p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
            </div>
        </section>
    </main>
</LayoutBN>
<style>
  section > div > p > p {
    text-align: justify;
  }
</style>