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

export default function SectionHeader({ eyebrow, title, body, tone = "light" }: { eyebrow: string; title: string; body?: string; tone?: "light" | "dark" }) {
  const isDark = tone === "dark";

  return (
    <div className="mx-auto max-w-3xl text-center">
      <p className={cn("mb-4 text-xs font-semibold uppercase tracking-[0.28em]", isDark ? "text-optical/90" : "text-optical/75")}>{eyebrow}</p>
      <h2 className={cn("text-3xl font-semibold tracking-[-0.045em] sm:text-5xl", isDark ? "text-white" : "text-ink")}>{title}</h2>
      {body ? <p className={cn("mt-5 text-base leading-8 sm:text-lg", isDark ? "text-white/72" : "text-ink/62")}>{body}</p> : null}
    </div>
  );
}