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

export function SectionHeader({
  label,
  heading,
  sub,
  align = 'left',
  className = '',
}: Props) {
  const alignment =
    align === 'center' ? 'items-center text-center mx-auto' : 'items-start text-left'
  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}
      <h2 className="h2-display text-nearle-dark mt-3">{heading}</h2>
      {sub ? (
        <p className="font-body text-nearle-mid text-lg leading-relaxed mt-4">
          {sub}
        </p>
      ) : null}
    </div>
  )
}
