<script lang="ts">
	import type { SnippetJson } from '$lib/server/api/formatters';

	let { snippet }: { snippet: SnippetJson } = $props();

	const isCode = $derived(snippet.type === 'code');

	const title = $derived(
		snippet.type === 'code' ? snippet.title : null
	);

	const breadcrumb = $derived(
		snippet.type === 'code' ? snippet.description : snippet.breadcrumb
	);

	const content = $derived(
		snippet.type === 'code' ? snippet.codeList[0]?.code ?? '' : snippet.text
	);

	const language = $derived(
		snippet.type === 'code' ? (snippet.codeList[0]?.language ?? '') : null
	);

	const tokenCount = $derived(snippet.tokenCount ?? 0);
</script>

<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-2.5">
		<div class="flex items-center gap-2">
			{#if isCode}
				<span class="rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700">code</span>
			{:else}
				<span class="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">info</span>
			{/if}
			{#if title}
				<span class="text-sm font-medium text-gray-800">{title}</span>
			{/if}
		</div>
		<span class="text-xs text-gray-400">{tokenCount} tokens</span>
	</div>

	{#if breadcrumb}
		<p class="bg-gray-50 px-4 py-1.5 text-xs italic text-gray-500">{breadcrumb}</p>
	{/if}

	<div class="p-4">
		{#if isCode}
			<pre
				class="overflow-x-auto rounded bg-gray-950 p-4 text-sm text-gray-100"
			><code>{content}</code></pre>
		{:else}
			<div class="prose prose-sm max-w-none whitespace-pre-wrap text-gray-700">{content}</div>
		{/if}
	</div>
</div>
