import { motion } from "framer-motion";

interface Props {
  eyebrow?: string;
  title: React.ReactNode;
  description?: string;
  align?: "left" | "center";
}

export function SectionHeading({ eyebrow, title, description, align = "center" }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0 }}
      transition={{ duration: 0.6 }}
      className={`max-w-2xl ${align === "center" ? "mx-auto text-center" : ""}`}
    >
      {eyebrow && (
        <div className={`flex items-center gap-3 mb-5 ${align === "center" ? "justify-center" : ""}`}>
          <span className="h-px w-10 bg-brand-red" />
          <span className="eyebrow">{eyebrow}</span>
          {align === "center" && <span className="h-px w-10 bg-brand-red" />}
        </div>
      )}
      <h2 className="display-lg">{title}</h2>
      {description && (
        <p className="mt-5 text-muted-foreground text-base md:text-lg leading-relaxed extralight">{description}</p>
      )}
    </motion.div>
  );
}