import type { TextSectionPayload } from '@homaroma/types';

interface DynamicTextProps {
  payload: TextSectionPayload;
}

export default function DynamicText({ payload }: DynamicTextProps) {
  const { title, content, textAlign = 'left' } = payload;

  const alignClass = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }[textAlign] || 'text-left';

  return (
    <section className="py-16 px-6 bg-white relative">
      <div className={`max-w-4xl mx-auto space-y-6 ${alignClass}`}>
        {title && (
          <h2 className="text-3xl md:text-4xl font-serif text-spa-forest font-semibold">
            {title}
          </h2>
        )}
        <div 
          className="text-gray-600 leading-relaxed text-base md:text-lg font-light whitespace-pre-wrap"
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </div>
    </section>
  );
}