'use client';

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

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

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

  return (
    <DebugName name="ActivityLog">
      <ScrollArea className="h-48">
        {entries.length === 0 ? (
          <div className="text-xs text-gray-500 italic">No activity yet.</div>
        ) : (
          <div className="space-y-1">
            {entries.map((entry) => (
              <div
                key={entry.id}
                className="text-xs text-gray-300 border-b border-gray-800 pb-1 last:border-0"
              >
                <span className="text-gray-600 mr-1">
                  [{entry.eventType}]
                </span>
                {entry.message}
              </div>
            ))}
          </div>
        )}
      </ScrollArea>
    </DebugName>
  );
}

ActivityLog.displayName = 'ActivityLog';