<script lang="ts">
	let { thumbnail = null, status = 'idle' } = $props<{
		thumbnail: string | null;
		status: 'idle' | 'extracting' | 'success' | 'error';
	}>();
</script>

{#if status === 'extracting'}
	<div class="border rounded-lg p-4 bg-gray-50">
		<div class="flex items-center gap-3 mb-2">
			<div class="animate-spin text-blue-600">🎨</div>
			<span class="text-sm font-medium text-gray-700">Extracting thumbnail...</span>
		</div>
		<!-- Loading skeleton -->
		<div class="w-full aspect-square bg-gray-200 animate-pulse rounded"></div>
	</div>
{:else if status === 'success' && thumbnail}
	<div class="border rounded-lg p-4 bg-white shadow-sm">
		<div class="flex items-center gap-2 mb-2">
			<span class="text-green-600">✓</span>
			<span class="text-sm font-medium text-gray-700">Thumbnail extracted</span>
		</div>
		<img src={thumbnail} alt="Post thumbnail" class="w-full aspect-square object-cover rounded" />
	</div>
{:else if status === 'error'}
	<div class="border border-red-200 rounded-lg p-4 bg-red-50">
		<div class="flex items-center gap-2">
			<span class="text-red-600">✗</span>
			<span class="text-sm font-medium text-red-700">Thumbnail extraction failed</span>
		</div>
	</div>
{/if}
