import type { ReactNode } from 'react';

export interface HeadingProps {
  /** 2 for a section headline, 3 for a block within it. Never skip a level. */
  level?: 2 | 3;
  id?: string;
  children?: ReactNode;
}

/** A section headline. It may state a claim, but it never advertises. */
export function Heading({ level = 2, id, children }: HeadingProps) {
  const Tag = level === 3 ? 'h3' : 'h2';
  return (
    <Tag id={id} className={level === 3 ? 'h3' : 'h2'}>
      {children}
    </Tag>
  );
}