---
// src/components/EventsGrid.astro

import HoverCard from "./HoverCard.astro";

interface Event {
	image: string;
	title: string;
	date: string;
	description: string;
}
const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
	events?: Event[];
	id?: string;
};
import "../styles/components/EventsGrid.css";
---

<h2 class="section-title">Events</h2>
<section id={id} class="events-gird container">
	{
		events.map((event: Event) => (
			<HoverCard
				title={event.title}
				date={event.date}
				description={event.description}
				image={event.image}
			/>
		))
	}
</section>