<template>
	<section class="py-12 lg:py-16" :class="bgClass">
		<div class="xl:container mx-auto px-6">
			<h2 v-if="title" class="text-2xl lg:text-3xl font-bold mb-6">{{ title }}</h2>
			<div class="prose prose-lg max-w-none" v-html="renderedContent"></div>
		</div>
	</section>
</template>

<script setup lang="ts">
import { marked } from "marked";

const props = defineProps<{
	title?: string;
	content: string;
	variant?: "white" | "gray";
}>();

const renderedContent = computed(() => marked(props.content));
const bgClass = computed(() => (props.variant === "gray" ? "bg-gray-50" : "bg-white"));
</script>

<style scoped>
.prose :deep(p) {
	@apply mb-4;
}

.prose :deep(strong) {
	@apply font-semibold;
}

.prose :deep(a) {
	@apply text-gray-900 underline underline-offset-2 hover:text-gray-600;
}

.prose :deep(ul) {
	@apply list-disc pl-6 mb-4;
}

.prose :deep(ol) {
	@apply list-decimal pl-6 mb-4;
}

.prose :deep(h2) {
	@apply text-2xl font-bold mt-8 mb-4;
}

.prose :deep(h3) {
	@apply text-xl font-semibold mt-6 mb-3;
}
</style>
