<script lang="ts">
	import FileText from "$icon/file-text";
	import PanelHeader from "#lib/components/repo/PanelHeader.svelte";
	import LayerCard from "#lib/components/ui/LayerCard.svelte";
	import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte";
	import LayerCardSecondary from "#lib/components/ui/LayerCardSecondary.svelte";
	import { mermaidDiagrams } from "#lib/components/ui/mermaidDiagrams.ts";

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

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

<LayerCard class="mt-md w-full defer-render-256">
	<LayerCardSecondary class="min-h-[calc(2.5rem-2*var(--layer-gap))] py-0">
		<PanelHeader title={filename} icon={FileText} />
	</LayerCardSecondary>
	<LayerCardPrimary padding="none">
		{#if html}
			<div
				data-testid="renderedMarkdownBody"
				class="markup overflow-x-auto px-xl py-md"
				use:mermaidDiagrams={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}
	</LayerCardPrimary>
</LayerCard>