import type { ReactNode } from 'react';
import './blocks.css';

export interface TextBlockProps {
  title?: string;
  content: string | ReactNode;
  align?: 'left' | 'center' | 'right' | 'justify';
  variant?: 'default' | 'narrow' | 'wide' | 'fullwidth';
  className?: string;
}

export function TextBlock({ 
  title, 
  content, 
  align = 'left',
  variant = 'default',
  className = ''
}: TextBlockProps) {
  return (
    <section className={`shared-text-block shared-text-block--${variant} ${className}`}>
      {title && <h2 className="shared-text-block__title">{title}</h2>}
      <div 
        className="shared-text-block__content"
        style={{ textAlign: align }}
      >
        {typeof content === 'string' ? (
          <div dangerouslySetInnerHTML={{ __html: content }} />
        ) : (
          content
        )}
      </div>
    </section>
  );
}

