// components/sections/RichText.tsx
// Raw HTML content block with themed prose styling
// 5 themes
import React from 'react';

type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeStyles {
  sectionBg: string;
  proseAccent: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    sectionBg: 'bg-white',
    proseAccent: '',
  },
  warm: {
    sectionBg: 'bg-white',
    proseAccent: 'prose-a:text-orange-600 prose-headings:text-slate-800',
  },
  professional: {
    sectionBg: 'bg-slate-50',
    proseAccent: 'prose-a:text-emerald-600 prose-headings:text-slate-800',
  },
  ocean: {
    sectionBg: 'bg-white',
    proseAccent: 'prose-a:text-blue-600 prose-headings:text-slate-800',
  },
  forest: {
    sectionBg: 'bg-white',
    proseAccent: 'prose-a:text-emerald-600 prose-headings:text-slate-800',
  },
};

interface RichTextProps {
  content?: string;
  theme?: ThemeKey;
}

export function RichText({ content = '', theme = 'default' }: RichTextProps) {
  const t = THEMES[theme] || THEMES.default;

  if (!content) return null;
  return (
    <section className={`w-full py-8 ${t.sectionBg}`}>
      <div className={`container max-w-4xl mx-auto px-4 prose-article ${t.proseAccent}`} dangerouslySetInnerHTML={{ __html: content }} />
    </section>
  );
}
