import Reveal from './Reveal'

interface Props {
  eyebrow: string
  title: string
  lead?: string
  center?: boolean
}

export default function SectionHeading({ eyebrow, title, lead, center = true }: Props) {
  return (
    <Reveal className={center ? 'text-center' : ''}>
      <span className={`eyebrow ${center ? '' : 'eyebrow-line'}`}>{eyebrow}</span>
      <h2 className="sec-title">{title}</h2>
      {lead && <p className={`sec-lead ${center ? 'mx-auto' : ''}`}>{lead}</p>}
    </Reveal>
  )
}
