<script lang="ts">
	import { marked } from 'marked';
	import DOMPurify from 'isomorphic-dompurify';

	interface NoteConfig {
		content: string;
		format: 'markdown' | 'text' | 'html';
	}

	interface Props {
		config: NoteConfig;
	}

	let { config }: Props = $props();

	marked.setOptions({
		breaks: true,
		gfm: true
	});

	const renderedContent = $derived.by(() => {
		if (config.format === 'text') {
			return DOMPurify.sanitize(
				config.content
					.replace(/&/g, '&amp;')
					.replace(/</g, '&lt;')
					.replace(/>/g, '&gt;')
					.replace(/\n/g, '<br>')
			);
		}
		if (config.format === 'html') {
			return DOMPurify.sanitize(config.content);
		}
		const raw = marked.parse(config.content, { async: false }) as string;
		return DOMPurify.sanitize(raw);
	});
</script>

<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
	<div class="prose prose-sm prose-invert max-w-none flex-1 overflow-auto text-foreground">
		<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
		{@html renderedContent}
	</div>
</div>
