"use client";

import Link from "next/link";

export default function Error({ reset }: { error: Error; reset: () => void }) {
  return (
    <main className="grid min-h-dvh place-items-center px-6 text-center">
      <div>
        <h1 className="text-display">Something broke</h1>
        <p className="mx-auto mt-2 max-w-[46ch] text-body text-dim">
          The view failed to render. Your requests are unaffected — they run on the server.
        </p>
        <div className="mt-6 flex justify-center gap-2">
          <button
            onClick={reset}
            className="focus-ring rounded-control bg-accent px-4 py-2 text-callout
                       font-semibold text-[var(--accent-ink)]"
          >
            Try again
          </button>
          <Link
            href="/"
            className="focus-ring rounded-control border border-edge-hi px-4 py-2
                       text-callout font-semibold text-ink"
          >
            Back to search
          </Link>
        </div>
      </div>
    </main>
  );
}