import type { ReactNode } from "react";

type PageHeroProps = {
  title: string;
  accent: string;
  lead?: ReactNode;
};

/** Centered hero band used by every secondary page. */
export function PageHero({ title, accent, lead }: PageHeroProps) {
  return (
    <section className="hero-wrap">
      <div className="hero py-4 py-md-5">
        <div className="hero-grid-bg" aria-hidden="true" />
        <div className="container">
          <div className="row">
            <div className="col-12 col-md-8 col-lg-6 mx-auto text-center">
              <h1 className="hero-title p-0 mt-0 mb-3">
                {title} <em>{accent}</em>
              </h1>
              {lead ? <p className="hero-lead m-0">{lead}</p> : null}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}