'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import {
  revealVariants,
  staggerContainer,
  viewportOnce,
} from '@/lib/animations';

interface SectionHeaderProps {
  eyebrow: string;
  title: string;
  subtitle?: string;
  className?: string;
  align?: 'left' | 'center';
}

export default function SectionHeader({
  eyebrow,
  title,
  subtitle,
  className,
  align = 'center',
}: SectionHeaderProps) {
  const isCenter = align === 'center';

  return (
    <motion.div
      variants={staggerContainer}
      initial="hidden"
      whileInView="visible"
      viewport={viewportOnce}
      className={cn(
        'flex flex-col',
        isCenter ? 'items-center text-center' : 'items-start text-left',
        className,
      )}
    >
      <motion.span
        variants={revealVariants}
        className="label-md text-primary mb-3"
      >
        {eyebrow}
      </motion.span>

      <motion.h2
        variants={revealVariants}
        className={cn(
          'font-serif font-semibold tracking-headline text-on-surface',
          'text-4xl md:text-5xl',
          isCenter && 'max-w-3xl',
        )}
      >
        {title}
      </motion.h2>

      {subtitle && (
        <motion.p
          variants={revealVariants}
          className={cn(
            'mt-4 text-lg text-outline leading-relaxed',
            isCenter ? 'max-w-2xl' : 'max-w-2xl',
          )}
        >
          {subtitle}
        </motion.p>
      )}
    </motion.div>
  );
}

export type { SectionHeaderProps };
