<script lang="ts">
	let { status = 'idle', bodyText = '', onRetry } = $props<{
		status: string;
		bodyText: string;
		onRetry: () => void;
	}>();
</script>

{#if status === 'error' && bodyText}
	<div class="border rounded p-4 bg-yellow-50 space-y-2">
		<h3 class="font-bold text-lg">Extraction Error - Raw Text Available</h3>
		<details class="border rounded p-2 bg-white text-sm">
			<summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
			<div
				class="mt-2 pt-2 border-t whitespace-pre-wrap break-word max-h-48 overflow-y-auto text-xs"
			>
				{bodyText}
			</div>
		</details>
		<button
			onclick={onRetry}
			class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600 w-full mt-2"
		>
			🔄 Retry Extraction
		</button>
	</div>
{/if}
