<script lang="ts">
	let { logs = [], currentMethod = '', status = 'idle' } = $props<{
		logs: string[];
		currentMethod: string;
		status: string;
	}>();
</script>

<div
	class="bg-slate-900 text-slate-100 p-4 rounded-lg shadow-lg min-h-[120px] max-h-[400px] overflow-y-auto"
>
	<div class="flex items-center justify-between mb-3 pb-2 border-b border-slate-700">
		<div class="text-sm font-semibold opacity-70">System Logs</div>
		{#if currentMethod}
			<div class="text-xs bg-blue-600 px-2 py-1 rounded flex items-center gap-1">
				<span class="animate-pulse">⚡</span>
				<span>Current: {currentMethod}</span>
			</div>
		{/if}
	</div>
	<div class="space-y-1 font-mono text-xs">
		{#each logs as log}
			<div
				class="flex items-start gap-2 py-1 {log.includes('✅')
					? 'text-green-400'
					: log.includes('❌')
						? 'text-red-400'
						: log.includes('🔄')
							? 'text-yellow-400'
							: log.includes('📦') ||
									log.includes('🎯') ||
									log.includes('🔌') ||
									log.includes('📄')
								? 'text-blue-300'
								: 'text-slate-300'}"
			>
				<span class="opacity-50">&gt;</span>
				<span class="flex-1">{log}</span>
			</div>
		{/each}
		{#if status === 'extracting'}
			<div class="flex items-center gap-2 py-1 text-blue-400 animate-pulse">
				<span class="opacity-50">&gt;</span>
				<span>Processing...</span>
			</div>
		{/if}
	</div>
</div>
