import { ActivityEvent } from '../../lib/utils';
import { ActivityEventCard } from './ActivityEventCard';

interface ActivityTimelineProps {
  events: ActivityEvent[];
  emptyLabel: string;
  limit?: number;
}

export function ActivityTimeline({ events, emptyLabel, limit }: ActivityTimelineProps) {
  const visibleEvents = limit ? events.slice(-limit) : events;

  if (visibleEvents.length === 0) {
    return <div className="text-[13px] text-slate-500">{emptyLabel}</div>;
  }

  return (
    <ol className="flex flex-col list-none p-0 m-0">
      {visibleEvents.map((event, index) => (
        <li key={event.id}>
          <ActivityEventCard event={event} isLast={index === visibleEvents.length - 1} />
        </li>
      ))}
    </ol>
  );
}
