import type { ReactNode } from "react";

export function SectionHeader({
  eyebrow,
  title,
  lead,
}: {
  eyebrow: ReactNode;
  title: ReactNode;
  lead?: ReactNode;
}) {
  return (
    <div className="max-w-2xl">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{eyebrow}</p>
      <h2 className="mt-3 font-display text-3xl font-bold tracking-tight sm:text-4xl 2xl:text-5xl">
        {title}
      </h2>
      {lead && <p className="mt-4 text-base text-muted-foreground 2xl:text-lg">{lead}</p>}
    </div>
  );
}