import type { HeadingContent } from "@/content/types";
import { site } from "@/content/site";
import { RichText } from "./rich-text";

export function PageHero({
  content,
  apply = false,
  fallbackTitle = "",
}: {
  content: HeadingContent;
  apply?: boolean;
  fallbackTitle?: string;
}) {
  return (
    <section className={`page-hero ${apply ? "loan-hero" : ""}`}>
      <div className="inner-container">
        <h1 className={content.title ? undefined : "sr-only"}>
          {content.title || fallbackTitle}
        </h1>
        {content.description.length > 0 && (
          <div className="rich-text">
            <RichText nodes={content.description} />
          </div>
        )}
        {apply && (
          <a className="site-button" href={site.application}>
            APPLY FOR A LOAN NOW
          </a>
        )}
      </div>
    </section>
  );
}