import type { Metadata } from 'next'

import { Button } from '@/components/ui/button'
import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
import Link from 'next/link'
import React from 'react'

export default function Checkout() {
  return (
    <div className="container min-h-[70vh] py-16">
      <div className="mx-auto flex max-w-2xl flex-col gap-6 rounded-xl border bg-card p-8">
        <h1 className="text-3xl font-medium">Checkout unavailable</h1>
        <p className="text-base text-muted-foreground">
          Online checkout is temporarily unavailable while payment methods are being updated.
        </p>
        <p className="text-sm text-muted-foreground">
          You can continue browsing the catalog. If you already placed an order, use the order
          lookup page to access your purchase history.
        </p>
        <div className="flex flex-col gap-3 sm:flex-row">
          <Button asChild>
            <Link href="/shop">Continue shopping</Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/find-order">Find an order</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

export const metadata: Metadata = {
  description: 'Checkout is temporarily unavailable.',
  openGraph: mergeOpenGraph({
    title: 'Checkout',
    url: '/checkout',
  }),
  title: 'Checkout unavailable',
}