import Link from "next/link";

type PageHeroProps = {
  eyebrow: string;
  title: string;
  lead: string;
  backHref?: string;
  backLabel?: string;
};

export function PageHero({
  eyebrow,
  title,
  lead,
  backHref = "/",
  backLabel = "返回首页",
}: PageHeroProps) {
  return (
    <header className="page-hero band-light band-section">
      <div className="container-site section-stack gap-6">
        <Link
          href={backHref}
          className="page-hero__back type-caption-strong text-body no-underline hover:no-underline w-fit"
        >
          ← {backLabel}
        </Link>
        <div className="page-hero__copy">
          <p className="section-eyebrow page-hero__eyebrow">{eyebrow}</p>
          <h1 className="page-hero__title type-display-lg text-ink">{title}</h1>
          <p className="page-hero__lead type-lead text-body">{lead}</p>
        </div>
      </div>
    </header>
  );
}