heading.tsx

import React from 'react'
import { clsx } from 'clsx'
import type { HTMLAttributes } from 'react'
import { generateIdFromChildren } from '@/tools/generate-id-from-children'

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

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  children?: React.ReactNode
  className?: string
  /** Custom ID for the heading. If not provided, will be auto-generated from children content */
  id?: string
  /** The HTML heading tag to render (h1, h2, h3, h4, h5, h6) */
  as?: HeadingLevel
  /** The heading level to use for styling (independent of the HTML tag) */
  styleAs?: HeadingLevel
  /** Font size override */
  fontSize?: string
  /** Font weight override */
  fontWeight?: string