"use client";

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

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

export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
	if (events.length === 0) {
		return (
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="flex flex-col items-center justify-center py-16 text-center"
			>
				<div className="glass-card p-6 inline-flex flex-col items-center">
					<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
					<h3 className="text-sm font-medium text-muted-foreground">
						No events yet
					</h3>
					<p className="text-xs text-muted-foreground/60 mt-1">
						Create your first event to get started
					</p>
				</div>
			</motion.div>
		);
	}

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