interface SectionTitleProps {
  eyebrow: string;
  heading: React.ReactNode;
  lede?: string;
  accent?: "purple" | "green";
}

export function SectionTitle({ eyebrow, heading, lede, accent = "purple" }: SectionTitleProps) {
  const accentClass = accent === "green" ? " green" : "";
  return (
    <div className="section-title">
      <span className={`eyebrow${accentClass}`}>
        <span className="pip" />
        {eyebrow}
      </span>
      <h2 className={`h-section${accentClass}`}>{heading}</h2>
      {lede && <p className="lede">{lede}</p>}
    </div>
  );
}