import { Link } from "react-router-dom";
import { AlertCircle, CheckCircle2, FileText, MailCheck, MessageCircle } from "lucide-react";
import { formatCommunicationTime, type ActivityEvent } from "@/services/communication";

const icons = { action: AlertCircle, comment: MessageCircle, validation: CheckCircle2, invitation: MailCheck, information: FileText };

export function ActivityList({ events, limit }: { events: ActivityEvent[]; limit?: number }) {
  const visible = limit ? events.slice(0, limit) : events;
  if (!visible.length) return <p className="rounded-xl bg-muted/45 p-5 text-sm text-muted-foreground">Aucune activité récente fiable pour le moment.</p>;
  return <ol className="divide-y">{visible.map((event) => { const Icon = icons[event.kind]; return <li key={event.id}><Link to={event.href} className="flex gap-3 py-4 hover:text-primary"><span className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted"><Icon className="h-4 w-4" aria-hidden="true" /></span><span className="min-w-0 flex-1"><span className="block font-medium">{event.title}</span><span className="mt-1 block text-sm text-muted-foreground">{event.detail}</span></span><time className="shrink-0 text-xs text-muted-foreground" dateTime={event.at}>{formatCommunicationTime(event.at)}</time></Link></li>; })}</ol>;
}