'use client';

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

function isSanitizedRichTextData(data: unknown): data is SanitizedRichTextData {
  if (!data || typeof data !== 'object' || !('html' in data)) return false;
  const { html } = data as SanitizedRichTextData;
  return typeof html?.he === 'string' && typeof html.en === 'string';
}

export function Component({ data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const sanitizedHtml = isSanitizedRichTextData(data) ? data.html[locale] || data.html.he : '';

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

  // createElement (not JSX) injects server-sanitized admin HTML: JSX
  // dangerouslySetInnerHTML is banned project-wide; createElement is the
  // established escape hatch (same pattern as JsonLd.tsx) for verified-safe content.
  return createElement('div', {
    className: 'text-text-primary mx-auto max-w-3xl px-6 py-10',
    dir: dirForLocale(locale),
    dangerouslySetInnerHTML: { __html: sanitizedHtml },
  });
}