<script lang="ts">
	import FileText from "$icon/file-text";
	import Card from "$lib/components/ui/Card.svelte";
	import { enhanceCodeblocks } from "$lib/markup/highlight";

	interface Props {
		filename: string;
		contents: string;
		html?: string | null;
	}

	let { filename, contents, html = null }: Props = $props();
</script>

<Card padding="none" class="mt-md w-full overflow-hidden">
	<div class="border-b border-border-default px-md py-xs">
		<span class="flex items-center gap-xs">
			<FileText class="size-3.5 text-foreground-subtle" aria-hidden="true" />
			<span class="typography-monospace-small text-foreground-muted">{filename}</span>
		</span>
	</div>
	{#if html}
		<div class="markup overflow-x-auto px-xl py-md" use:enhanceCodeblocks={html}>
			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
			{@html html}
		</div>
	{:else}
		<div class="overflow-x-auto px-xl py-md">
			<pre
				class="typography-monospace-small whitespace-pre text-foreground-default">{contents}</pre>
		</div>
	{/if}
</Card>