'use client'

import { motion } from 'framer-motion'
import GradientText from './GradientText'

const ease = [0.22, 1, 0.36, 1] as const

interface PageHeaderProps {
  tag: string
  title: string
  titleHighlight: string
  subtitle: string
}

export default function PageHeader({ tag, title, titleHighlight, subtitle }: PageHeaderProps) {
  return (
    <div className="pt-32 pb-16 text-center">
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease }}>
        <p className="mono-label mb-4">{tag}</p>
      </motion.div>
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.1, ease }}>
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
          {title}{' '}
          <GradientText>{titleHighlight}</GradientText>
        </h1>
      </motion.div>
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2, ease }}>
        <p className="text-white/50 text-lg max-w-3xl mx-auto">
          {subtitle}
        </p>
      </motion.div>
    </div>
  )
}
