<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 Markup from "#lib/components/ui/Markup.svelte";
	import { isMarkdownFile } from "#lib/markup/format.ts";
	import type { MarkupContext } from "#lib/markup/paths.ts";

	interface Props {
		filename: string;
		contents: string;
		markup: MarkupContext;
	}

	let { filename, contents, markup }: 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 isMarkdownFile(filename)}
			<Markup
				source={contents}
				ctx={markup}
				document
				data-testid="renderedMarkdownBody"
				class="markup overflow-x-auto px-xl py-md"
				plainClass="overflow-x-auto px-xl py-md typography-monospace-small whitespace-pre text-foreground-default"
			/>
		{: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>