<script lang="ts">
	import { renderInline } from "#lib/markup/inline.ts";

	interface Props {
		text: string;
		links?: boolean;
	}

	let { text, links = true }: Props = $props();
</script>

<span
	class="[&_a]:text-foreground-link-default [&_a:hover]:text-foreground-link-hover [&_a:hover]:underline [&_code]:rounded-sm [&_code]:bg-background-inset [&_code]:px-3xs [&_code]:font-mono [&_code]:text-[0.875em] [&_strong]:font-semibold"
>
	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in renderInline -->
	{@html renderInline(text, links)}
</span>