import type { ReactNode } from "react";
import Link from "next/link";
import { PageHero } from "@/components/page-hero";
import { Button } from "@/components/ui/button";
import styles from "./status-page.module.css";

export function StatusPage({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children?: ReactNode;
}) {
  return (
    <main id="main-content" className={styles.page}>
      <PageHero
        content={{
          title,
          eyebrow: "",
          description: [
            { type: "p", children: [{ type: "text", text: description }] },
          ],
        }}
      />
      <div className={`inner-container ${styles.recovery}`}>
        <div className={styles.actions}>
          {children}
          <Button asChild>
            <Link href="/">Back to home</Link>
          </Button>
        </div>
        <p>
          Need a hand? <Link href="/contact">Contact MaxCredit</Link> and we’ll
          help you find what you need.
        </p>
      </div>
    </main>
  );
}