import { cn } from "@/lib/utils";

interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  eyebrow?: string;
  align?: "left" | "center" | "right";
  light?: boolean;
  className?: string;
}

export function SectionHeader({
  title,
  subtitle,
  eyebrow,
  align = "center",
  light = false,
  className,
}: SectionHeaderProps) {
  const alignCls = {
    left:   "items-start text-left",
    center: "items-center text-center",
    right:  "items-end text-right",
  }[align];

  return (
    <div className={cn("flex flex-col mb-16", alignCls, className)}>
      {eyebrow && (
        <p
          className={cn(
            "text-[10px] font-medium uppercase tracking-[0.22em] mb-5",
            light ? "text-[var(--color-moy-gold-light)]" : "text-[var(--color-moy-gold-dark)]"
          )}
        >
          {eyebrow}
        </p>
      )}

      <h2
        className={cn(
          "text-4xl md:text-[3.25rem] font-serif leading-tight mb-5",
          light ? "text-white" : "text-[var(--color-moy-dark)]"
        )}
      >
        {title}
      </h2>

      <span
        className={cn(
          "moy-gold-line",
          align === "center" && "mx-auto",
          align === "right" && "ml-auto"
        )}
      />

      {subtitle && (
        <p
          className={cn(
            "mt-6 text-base md:text-lg leading-relaxed max-w-2xl",
            align === "center" && "mx-auto",
            light ? "text-gray-300/80" : "text-gray-500"
          )}
        >
          {subtitle}
        </p>
      )}
    </div>
  );
}