import type { Metadata } from "next";
import Link from "next/link";

import { ButtonLink } from "@/components/ui/button-link";

export const metadata: Metadata = {
  title: "Payment failed",
  robots: { index: false, follow: false },
};

export default function CheckoutFailurePage() {
  return (
    <div className="mx-auto max-w-xl px-4 py-24 text-center">
      <p className="font-display text-4xl text-destructive">PAYMENT FAILED</p>
      <p className="mt-4 text-muted-foreground">
        No charge was completed. You can return to checkout or contact support.
      </p>
      <ButtonLink href="/checkout" className="mt-10 inline-flex rounded-full px-10 py-6">
        Try again
      </ButtonLink>
      <div className="mt-6">
        <Link href="/contact" className="text-sm text-muted-foreground underline-offset-4 hover:underline">
          Contact support
        </Link>
      </div>
    </div>
  );
}