export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

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

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

export default function HeadingSection({
  text,
  level: Tag,
  align,
  size,
  color,
  padding,
}: HeadingProps) {
  return (
    <div style={{ padding }}>
      <Tag
        style={{ fontSize: size }}
        className={`leading-tight font-bold ${alignClass[align]} ${color === 'muted' ? 'text-muted-foreground' : 'text-foreground'}`}
      >
        {text}
      </Tag>
    </div>
  );
}