"use client";

import Link from "next/link";
import { Page } from "@/components/ui/section";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <Page className="py-20 text-center">
      <p className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Temporarily unavailable</p>
      <h1 className="mt-2 text-3xl font-semibold tracking-tight">The atlas could not load this view</h1>
      <p className="mx-auto mt-2 max-w-md text-sm text-ink-2">The market-data service did not answer in time. Live streaming may continue while this page recovers.</p>
      {error.digest && <p className="mono mt-2 text-[11px] text-ink-3">ref {error.digest}</p>}
      <div className="mt-6 flex justify-center gap-2">
        <button type="button" onClick={reset} className="inline-flex h-11 items-center rounded-md bg-ink px-4 text-sm font-medium text-canvas">
          Try again
        </button>
        <Link href="/status" className="inline-flex h-11 items-center rounded-md border border-rule px-4 text-sm">
          System status
        </Link>
      </div>
    </Page>
  );
}