import { Link } from "@tanstack/react-router";
import { buttonClass } from "~/ui/Button";
import { DisplayTitle } from "./DisplayTitle";

/** Closing call to action: a ruled-off section with the two ways to start. */
export function CtaBand({ title, body }: { title: string; body: string }) {
  return (
    <section className="flex flex-col gap-6 border-t border-kumo-hairline pt-12 md:flex-row md:items-end md:justify-between">
      <div className="space-y-3">
        <DisplayTitle title={title} />
        <p className="max-w-xl leading-7 text-kumo-subtle">{body}</p>
      </div>
      <div className="flex shrink-0 flex-wrap gap-3">
        <Link to="/signup" className={buttonClass("primary")}>
          Create an account
        </Link>
        <Link to="/self-host" className={buttonClass("secondary")}>
          Self-host gitfor
        </Link>
      </div>
    </section>
  );
}