import React from 'react';
import { Card } from '@/components/ui/Card';
import { Avatar } from '@/components/ui/Avatar';

export interface ActivityItem {
  id: string;
  user: string;
  action: string;
  time: string;
  avatarUrl?: string | null;
}

export interface ActivityFeedProps {
  activities: ActivityItem[];
  title?: string;
  maxItems?: number;
}

export function ActivityFeed({ activities, title = 'Letzte Aktivitäten', maxItems = 10 }: ActivityFeedProps) {
  const visible = activities.slice(0, maxItems);
  return (
    <Card title={title} data-testid="activity-feed">
      {visible.length === 0 ? (
        <p className="text-sm text-secondary-500 py-4 text-center">Keine Aktivitäten vorhanden.</p>
      ) : (
        <ul className="space-y-3" role="list">
          {visible.map((activity) => (
            <li key={activity.id} className="flex items-start gap-3 text-sm">
              <Avatar name={activity.user} src={activity.avatarUrl} size="sm" />
              <div className="flex-1 min-w-0">
                <span className="font-medium text-secondary-900">{activity.user}</span>
                <span className="text-secondary-600"> {activity.action}</span>
                <span className="text-secondary-400 block mt-0.5">{activity.time}</span>
              </div>
            </li>
          ))}
        </ul>
      )}
    </Card>
  );
}