import { type ReactNode } from 'react';

export type RichTextProps = {
  content: ReactNode;
  padding: string;
  maxWidth: string;
  align: 'left' | 'center' | 'right';
};

const alignClass = {
  left: 'text-left',
  center: 'text-center',
  right: 'text-right',
};

export default function RichTextSection({
  content,
  padding,
  maxWidth,
  align,
}: RichTextProps) {
  const className = `rich-text ${alignClass[align]} ${maxWidth ? 'mx-auto' : ''}`;
  const style = { maxWidth: maxWidth || undefined };

  return (
    <div style={{ padding }}>
      {typeof content === 'string' ? (
        <div
          style={style}
          className={className}
          dangerouslySetInnerHTML={{ __html: content }}
        />
      ) : (
        <div style={style} className={className}>
          {content}
        </div>
      )}
    </div>
  );
}