---
// 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.length === 0 ? (
			<p style="text-align:center; width:100%; opacity:0.7;">Keine Events vorhanden. Bitte im Admin-Bereich hinzufügen.</p>
		) : (
			events.map((event: Event) => (
				<HoverCard
					title={event.title}
					date={event.date}
					description={event.description}
					image={event.image}
				/>
			))
		)
	}
</section>
