<script lang="ts">
	import Markdown from './Markdown.svelte';

	let {
		value = $bindable(),
		name
	}: { value: string; onsave?: () => Promise<void>; name?: string } = $props();

	let area: HTMLTextAreaElement = $state()!;
</script>

<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
	<div
		class="relative min-h-40 w-full rounded-lg border-0 bg-gray-50 text-sm focus:border-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:focus:ring-primary-500"
	>
		<textarea
			bind:value
			bind:this={area}
			{name}
			class="min-h-full w-full rounded-lg border-0 bg-gray-50 p-2.5 dark:bg-gray-700"
		></textarea>
	</div>

	<Markdown src={value} class="overflow-scroll" />
</div>
