<template>
  <div class="max-w-3xl mx-auto">
    <!-- Loading State -->
    <div v-if="loading" class="space-y-4">
      <div class="skeleton-shimmer rounded-md" style="height: 32px; width: 60%" />
      <div class="skeleton-shimmer rounded-md" style="height: 20px" />
      <div class="skeleton-shimmer rounded-md" style="height: 20px; width: 90%" />
      <div class="skeleton-shimmer rounded-md" style="height: 20px" />
      <div class="skeleton-shimmer rounded-md" style="height: 20px; width: 80%" />
    </div>

    <!-- Content State -->
    <article v-else>
      <h1 class="text-3xl font-bold text-text mb-6">{{ title }}</h1>
      <div class="prose prose-invert max-w-none text-text-muted" v-html="content" />
    </article>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  title: string;
  content?: string;
  loading?: boolean;
}>(), {
  content: "",
  loading: false,
});
</script>
