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>
  )
}