---
const { content, index } = Astro.props;
import { Image } from "astro:assets";
---

<div
	style={{ borderWidth: "1px" }}
	class="flex cursor-pointer flex-col items-start justify-start gap-2 overflow-hidden rounded-lg border-accent-2 transition-all ease-in-out hover:border-accent"
>
	<a href={content.link} target="_blank">
    <Image height="800" width="1200" src={content.image} alt={content.title} loading={index < 2 ? "eager" : "lazy"} />
		<div class="flex flex-col gap-2 p-4">
			<h2 class="text-2xl font-bold">{content.title}</h2>
			<p class="">
				{content.description}
			</p>
			<div class="flex gap-2">
				{content.tags.map((tag) => <p>#{tag}</p>)}
			</div>
		</div>
	</a>
</div>