<script lang="ts">
	import FileText from "$icon/file-text";

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

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

<div class="mt-4 w-full overflow-hidden rounded bg-background-default shadow-sm">
	<div class="border-b border-border-default px-4 py-2">
		<span class="flex items-center gap-2">
			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
			<span class="font-mono text-sm text-foreground-muted">{filename}</span>
		</span>
	</div>
	<div class="overflow-x-auto px-6 py-4">
		<pre class="font-mono text-sm whitespace-pre-wrap text-foreground-default">{contents}</pre>
	</div>
</div>