// components/sections/TextParagraph.tsx
// Rich text content block with optional heading and highlight style
// 5 themes

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

interface ThemeStyles {
  headingColor: string;
  textColor: string;
  highlightBg: string;
  highlightBorder: string;
  cardBg: string;
  cardBorder: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    headingColor: 'text-white',
    textColor: 'text-text-light-gray',
    highlightBg: 'bg-brand-highlight/60',
    highlightBorder: 'border-crimson-red',
    cardBg: 'bg-white',
    cardBorder: 'border-soft-gray-border/40',
  },
  warm: {
    headingColor: 'text-slate-800',
    textColor: 'text-slate-600',
    highlightBg: 'bg-orange-50',
    highlightBorder: 'border-orange-500',
    cardBg: 'bg-white',
    cardBorder: 'border-orange-200',
  },
  professional: {
    headingColor: 'text-slate-800',
    textColor: 'text-slate-500',
    highlightBg: 'bg-slate-50',
    highlightBorder: 'border-slate-800',
    cardBg: 'bg-white',
    cardBorder: 'border-slate-200',
  },
  ocean: {
    headingColor: 'text-slate-800',
    textColor: 'text-slate-600',
    highlightBg: 'bg-blue-50',
    highlightBorder: 'border-blue-500',
    cardBg: 'bg-white',
    cardBorder: 'border-blue-200',
  },
  forest: {
    headingColor: 'text-slate-800',
    textColor: 'text-slate-600',
    highlightBg: 'bg-emerald-50',
    highlightBorder: 'border-emerald-500',
    cardBg: 'bg-white',
    cardBorder: 'border-emerald-200',
  },
};

interface TextParagraphProps {
  heading?: string;
  body: string;
  style?: 'default' | 'highlight' | 'card';
  theme?: ThemeKey;
}

export function TextParagraph({ heading, body, style = 'default', theme = 'default' }: TextParagraphProps) {
  const t = THEMES[theme] || THEMES.default;

  const wrapperClass = style === 'highlight'
    ? `${t.highlightBg} border-l-4 ${t.highlightBorder} rounded-r-lg p-6`
    : style === 'card'
    ? `${t.cardBg} rounded-xl shadow-sm border ${t.cardBorder} p-6`
    : '';

  return (
    <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className={`${wrapperClass} mb-6`}>
      {heading && (
        <h3 className={`text-xl font-bold mb-3 ${t.headingColor}`}>{heading}</h3>
      )}
      <div className={`leading-relaxed space-y-4 ${t.textColor}`}>
        {body.split('\n\n').map((paragraph, i) => (
          <p key={i}>{paragraph}</p>
        ))}
      </div>
    </div>
    </div>
  );
}
