import ScrollReveal from './ScrollReveal'

interface SectionHeaderProps {
  children: React.ReactNode
  wobble?: 1 | 2 | 3 | 4
  className?: string
}

export default function SectionHeader({ children, wobble = 1, className = '' }: SectionHeaderProps) {
  return (
    <ScrollReveal>
      <h2
        className={`font-marker text-3xl md:text-5xl text-zen/90 mb-8 wobble-${wobble} ${className}`}
      >
        <span className="scrawl-underline">{children}</span>
      </h2>
    </ScrollReveal>
  )
}