'use client'

import FadeInView from './FadeInView'
import GradientText from './GradientText'

interface SectionHeadingProps {
  tag: string
  title: string
  titleHighlight: string
  subtitle: string
  center?: boolean
}

export default function SectionHeading({ tag, title, titleHighlight, subtitle, center = true }: SectionHeadingProps) {
  return (
    <div className={`mb-16 ${center ? 'text-center' : ''}`}>
      <FadeInView>
        <p className="mono-label mb-4">{tag}</p>
      </FadeInView>
      <FadeInView delay={0.1}>
        <h2 className="text-4xl md:text-5xl font-bold mb-6">
          {title}{' '}
          <GradientText>{titleHighlight}</GradientText>
        </h2>
      </FadeInView>
      <FadeInView delay={0.2}>
        <p className={`text-white/50 text-lg ${center ? 'max-w-3xl mx-auto' : 'max-w-3xl'}`}>
          {subtitle}
        </p>
      </FadeInView>
    </div>
  )
}
