'use client';

import MarkdownRenderer from '../elements/markdown-renderer/MarkdownRenderer';

export interface PolicyDocumentSectionProps {
  /** Page title (e.g. "Terms of Service" or "Privacy Policy") */
  title: string;
  /** Optional effective date string (e.g. "January 1, 2025") */
  effectiveDate?: string;
  /** Full markdown content for the policy (supports placeholders replaced before passing in) */
  content: string;
  /** Optional additional class name for the container */
  className?: string;
}

/**
 * Renders a legal/policy page: title, optional effective date, and markdown body.
 * Content is passed in with all dynamic placeholders already replaced.
 * Businesses can override by providing custom content (e.g. from CMS or overwritten file).
 */
export const PolicyDocumentSection = ({
  title,
  effectiveDate,
  content,
  className = '',
}: PolicyDocumentSectionProps) => {
  return (
    <section className={`py-12 md:py-16 ${className}`}>
      <div className="mx-auto max-w-3xl px-4 md:px-8">
        <header className="mb-10 border-b border-gray-200 pb-8">
          <h1 className="font-display text-4xl font-semibold text-gray-900 md:text-5xl">
            {title}
          </h1>
          {effectiveDate && (
            <p className="mt-3 text-sm text-gray-500">
              Effective Date: {effectiveDate}
            </p>
          )}
        </header>
        <div className="prose prose-gray max-w-none text-gray-700">
          <MarkdownRenderer content={content} />
        </div>
      </div>
    </section>
  );
};
