'use client';

import type { ActivityLogEntry } from '@/lib/game/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';

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

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

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm text-gray-400">📜 Activity Log</CardTitle>
      </CardHeader>
      <CardContent>
        <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>
      </CardContent>
    </Card>
  );
}