---

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>