---
interface Props {
  content: string;
  max_width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

const { content, max_width = 'lg' } = Astro.props;

const widthClasses = {
  sm: 'max-w-2xl',
  md: 'max-w-3xl',
  lg: 'max-w-4xl',
  xl: 'max-w-5xl',
  full: 'max-w-full'
};
---

<section class={`${widthClasses[max_width]} mx-auto px-6 py-12`}>
  <div 
    class="prose prose-lg prose-gray dark:prose-invert max-w-none
           prose-headings:font-bold prose-headings:text-gray-900 dark:prose-headings:text-white
           prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
           prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-4
           prose-p:leading-relaxed prose-p:text-gray-700 dark:prose-p:text-gray-300
           prose-a:text-primary prose-a:no-underline hover:prose-a:underline
           prose-strong:text-gray-900 dark:prose-strong:text-white
           prose-ul:space-y-2 prose-ol:space-y-2
           prose-li:text-gray-700 dark:prose-li:text-gray-300
           prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-gray-50 dark:prose-blockquote:bg-gray-800 prose-blockquote:py-4 prose-blockquote:px-6 prose-blockquote:rounded-r-lg
           prose-table:border prose-table:rounded-lg prose-table:overflow-hidden
           prose-th:bg-gray-100 dark:prose-th:bg-gray-800 prose-th:px-4 prose-th:py-3
           prose-td:px-4 prose-td:py-3 prose-td:border-t"
    set:html={content}
  />
</section>
