export type TextProps = {
  text: string;
  align: 'left' | 'center' | 'right';
  size: string;
  color: 'default' | 'muted';
  padding: string;
  maxWidth: string;
};

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

export default function TextSection({
  text,
  align,
  size,
  color,
  padding,
  maxWidth,
}: TextProps) {
  return (
    <div style={{ padding }}>
      <p
        style={{ fontSize: size, maxWidth: maxWidth || undefined }}
        className={`leading-relaxed font-light ${alignClass[align]} ${color === 'muted' ? 'text-muted-foreground' : 'text-foreground'} ${maxWidth ? 'mx-auto' : ''}`}
      >
        {text}
      </p>
    </div>
  );
}