---
import LayoutBN from '../../../layouts/LayoutBN.astro';
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=politics&sort=-date_created&filter[lang][_eq]=bengali');
const dataJSON = await fetchData.json();
const data = dataJSON.data;
const fetchMeta = await fetch('https://api7.siliconpin.com/items/meta_data?filter[status][_eq]=published&filter[domain][_eq]=barta&filter[pages][_eq]=politics_bn');
const metaJSON = await fetchMeta.json();
const items = metaJSON.data[0];
// const imageData = data.image;
// const data = fetchDataJSON.data;
// console.log()
---

<LayoutBN title={items.title}
			metaTitle={items.title}
			description={items.description}
			ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
			tiwtterCard="summary_large_image"
			tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
			tiwtterTitle={items.title}
			tiwtterDesc={items.description}
			tiwtterURL=`https://barta-india.in/bn/politics/`
			ogSiteName=`https://barta-india.in/bn/politics/`
			ogType={items.og_type}
			ogTitle={items.title}
			ogDesc={items.description}
			ogURL=`https://barta-india.in/bn/politics/`
			canonical=`https://barta-india.in/bn/politics`
			>
	<main>
		<section class="container mx-auto px-4">
			<div class="my-16">
				<span class="text-[#780a0a] font-bold" id="pageName"></span>
				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
			</div>
				<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
						<div class="flex flex-col">
							<a href={`/bn/politics/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
							<h2 class="text-lg line-clamp-1">{items.title}</h2>
							<img class="aspect-video	" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title}/>
							<div class="h-[100px] overflow-y-hidden">
								<p id="" set:html={items.content}></p>		
							</div>
						</div>
						<div class="flex justify-end">
							<a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
						</div>			
					</div>
					)}
				</div>
				<!-- <div class="flex flex-col">
					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
					<div class="flex flex-col border-2 gap-6 p-6">
						<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
						<h2 class="text-lg">{items.title}</h2>
						<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
					</div>
					)}
				</div> -->
		</section>
	</main>
</LayoutBN>
<script is:inline>
	const pageName = window.location.href.split('/')[3];
	const pageName2 = window.location.href.split('/')[4];
	document.getElementById('pageName').innerHTML = '>&nbsp;' + pageName + '&nbsp;>&nbsp;' + pageName2;
	// console.log(pageName)
</script>
<style>

</style>