'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

type Props = {
  eyebrow: string;
  title: string;
  sub?: string;
  align?: 'center' | 'start';
  className?: string;
};

export function SectionHeader({
  eyebrow,
  title,
  sub,
  align = 'start',
  className,
}: Props) {
  const isCenter = align === 'center';
  return (
    <motion.header
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-80px' }}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
      className={cn(
        'flex flex-col gap-4',
        isCenter ? 'items-center text-center' : 'items-start',
        'max-w-3xl',
        isCenter && 'mx-auto',
        className,
      )}
    >
      <span className="label-mono inline-flex items-center gap-2">
        <span className="h-px w-8 bg-electric/60" aria-hidden />
        {eyebrow}
      </span>
      <h2 className="font-display text-balance text-[clamp(1.85rem,3.6vw,2.9rem)] font-semibold leading-[1.1] tracking-tight text-white">
        {title}
      </h2>
      {sub && (
        <p className="text-balance text-[clamp(0.98rem,1.4vw,1.1rem)] leading-relaxed text-slate-400">
          {sub}
        </p>
      )}
    </motion.header>
  );
}