import { motion } from "motion/react";
export default function SectionHeader({ tag, title, description, align = "left", dark = false }) {
  const isCenter = align === "center";
  return <motion.div
    initial={{ opacity: 0, y: 15 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: "-100px" }}
    transition={{ duration: 0.5, ease: "easeOut" }}
    className={`max-w-4xl ${isCenter ? "mx-auto text-center flex flex-col items-center" : ""} mb-12`}
  >
      {tag && <p className="font-mono text-[10px] font-bold tracking-widest text-orange-500 mb-3 flex items-center gap-2 uppercase">
          <span className="w-4 h-px bg-orange-500/40 inline-block" />
          {tag}
        </p>}
      <h2 className={`font-heading text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight leading-[1.1] ${dark ? "text-white" : "text-slate-900"}`}>
        {title}
      </h2>
      {description && <p className={`mt-4 leading-relaxed text-sm md:text-base max-w-2xl font-light ${dark ? "text-slate-300" : "text-slate-500"}`}>
          {description}
        </p>}
    </motion.div>;
}
