'use client';

import { useLocale } from '@/lib/i18n/react';
import type { Config } from './config';

const BG_CLASS: Record<Config['background'], string> = {
  neutral: 'bg-surface-base',
  brand: 'bg-brand-primary-50',
  subtle: 'bg-surface-subtle',
};

export function Component({ config }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const rawText = config.body[locale] || config.body.he;

  if (!rawText.trim()) return null;

  // Render as plain paragraphs — no HTML injection allowed (XSS-safe by design).
  const paragraphs = rawText
    .split(/\n\n+/)
    .map((p) => p.trim())
    .filter(Boolean);

  return (
    <div className={`${BG_CLASS[config.background]} px-6 py-4`}>
      {paragraphs.map((para) => (
        <p key={para} className="text-text-primary text-base leading-relaxed">
          {para}
        </p>
      ))}
    </div>
  );
}