"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 rounded-[10px] border border-dashed border-border/80 bg-muted/30 px-6 py-16 text-center shadow-[inset_0_0_0_1px_rgba(255,255,255,0.35)]"
			>
				<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
				<h3 className="text-sm font-medium text-foreground">No events yet</h3>
				<p className="mt-1 max-w-sm text-xs leading-relaxed text-muted-foreground/70">
					Capture something with AI or open manual create from More to start
					building your event timeline.
				</p>
			</motion.div>
		);
	}

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