import { motion } from "framer-motion";

interface Props {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  align?: "left" | "center";
  invert?: boolean;
  className?: string;
  maxWidth?: string;
}

export function SectionHeading({
  eyebrow,
  title,
  subtitle,
  align = "center",
  invert = false,
  className = "",
  maxWidth = "max-w-2xl",
}: Props) {
  return (
    <div className={`${align === "center" ? "mx-auto text-center" : ""} ${maxWidth} ${className}`}>
      {eyebrow ? (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.5 }}
          className="mb-3 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-gold"
        >
          <span className="h-px w-6 bg-gold" />
          {eyebrow}
          <span className="h-px w-6 bg-gold" />
        </motion.div>
      ) : null}
      <motion.h2
        initial={{ opacity: 0, y: 14 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
        className={`font-display text-3xl font-semibold leading-tight md:text-5xl ${invert ? "text-white" : "text-brand"}`}
      >
        {title}
      </motion.h2>
      {subtitle ? (
        <motion.p
          initial={{ opacity: 0, y: 14 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className={`mt-4 text-base md:text-lg ${invert ? "text-white/75" : "text-muted-foreground"}`}
        >
          {subtitle}
        </motion.p>
      ) : null}
    </div>
  );
}