<script lang="ts">
	let {
		result,
		onSelect
	}: {
		result: {
			id: string;
			title: string;
			description: string | null;
			totalSnippets: number | null;
			trustScore: number | null;
		};
		onSelect: (id: string) => void;
	} = $props();

	const snippetCount = $derived(result.totalSnippets ?? 0);
	const trust = $derived(result.trustScore ?? 0);
</script>

<button
	onclick={() => onSelect(result.id)}
	class="w-full rounded-xl border border-gray-200 bg-white p-4 text-left shadow-sm transition-all hover:border-blue-300 hover:shadow-md"
>
	<div class="flex items-center justify-between">
		<span class="font-semibold text-gray-900">{result.title}</span>
		<span class="text-xs text-gray-400">Trust {trust.toFixed(1)}/10</span>
	</div>
	<p class="font-mono text-xs text-gray-400">{result.id}</p>
	{#if result.description}
		<p class="mt-1.5 line-clamp-2 text-sm text-gray-600">{result.description}</p>
	{/if}
	<p class="mt-2 text-xs text-gray-400">{snippetCount.toLocaleString()} snippets</p>
</button>
