Mana-Loop/src/components/game/tabs/ActivityLog.tsx

import type { ActivityLogEntry } from '@/lib/game/types';
import { DebugName } from '@/components/game/debug/debug-context';

interface ActivityLogProps {
  activityLog: ActivityLogEntry[];
  maxEntries?: number;
}

export function ActivityLog({ activityLog, maxEntries = 20 }: ActivityLogProps) {
  const entries = activityLog.slice(0, maxEntries);

  if (entries.length === 0) {
    return (
      <DebugName name="ActivityLog">
        <div className="text-sm text-gray-500 italic p-2">
          No activity yet.
        </div>
      </DebugName>
    );
  }

  return (
    <DebugName name="ActivityLog">
      <div className="space-y-1 max-h-64 overflow-y-auto">
      {entries.map((entry) => (
        <div
          key={entry.id}
          className="text-xs text-gray-300 border-b border-gray-700 pb-1 last:border-0"
        >
          <span className="text-gray-500 mr-1">
            [{entry.eventType}]
          </span>
          {entry.message}
        </div>
      ))}
      </div>
    </DebugName>
  );
}