import { Calendar1Icon } from "lucide-react";
import { EventCard } from "./event-card";
import type { CalendarEvent } from "@/lib/types";

interface EventsListProps {
	events: CalendarEvent[];
	onEdit: (event: CalendarEvent) => void;
	onDelete: (eventId: string) => void;
}

export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
	if (events.length === 0) {
		return (
			<div className="flex flex-col items-center justify-center py-8 text-center">
				<Calendar1Icon className="h-12 w-12 text-muted-foreground mb-4" />
				<h3 className="text-lg font-medium text-muted-foreground">
					No events yet
				</h3>
				<p className="text-sm text-muted-foreground">
					Create your first event to get started
				</p>
			</div>
		);
	}

	return (
		<div className="space-y-4">
			{events.map((event) => (
				<EventCard
					key={event.id}
					event={event}
					onEdit={onEdit}
					onDelete={onDelete}
				/>
			))}
		</div>
	);
};