type Props = {
  label?: string
  heading: React.ReactNode
  sub?: React.ReactNode
  align?: 'left' | 'center'
  className?: string
  headingAs?: 'h1' | 'h2'
}

export function SectionHeader({
  label,
  heading,
  sub,
  align = 'left',
  className = '',
  headingAs = 'h2',
}: Props) {
  const alignment =
    align === 'center' ? 'items-center text-center mx-auto' : 'items-start text-left'
  const HeadingTag = headingAs

  return (
    <div className={`flex flex-col ${alignment} max-w-3xl ${className}`}>
      {label ? (
        <span className="font-mono text-[11px] tracking-[0.18em] uppercase text-purple-primary">
          {label}
        </span>
      ) : null}
      <HeadingTag className="h2-display text-nearle-dark mt-3">{heading}</HeadingTag>
      {sub ? (
        <p className="font-body text-nearle-mid text-lg leading-relaxed mt-4">
          {sub}
        </p>
      ) : null}
    </div>
  )
}
