import type { PageSection } from '@homaroma/types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

interface DynamicRichTextProps {
  section: PageSection;
}

export default function DynamicRichText({ section }: DynamicRichTextProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const payload = section.payload || {};
  
  const title = getLocalizedField(payload.title, lang);
  const content = getLocalizedField(payload.content, lang);

  if (!content) return null;

  return (
    <section className="ui-section-band bg-pop-bg relative">
      <div className="ui-section-inner space-y-6">
        {title && (
          <h2 className="font-serif text-3xl font-semibold text-pop-black md:text-4xl text-center">
            {title}
          </h2>
        )}
        <div 
          className="ui-prose text-base font-light leading-relaxed text-pop-black/80 md:text-lg max-w-3xl mx-auto"
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </div>
    </section>
  );
}