'use client';

import * as ActionIcons from '@/components/Icons';

import Link from 'next/link';
import { AlertIcon, RefreshIcon } from '@/components/Icons';

/** Any failed API call on a staff page lands here instead of the bare Next.js error screen */
export default function StaffError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <div className="card mx-auto mt-10 flex max-w-lg flex-col items-center p-10 text-center">
      <span className="grid h-14 w-14 place-items-center rounded-2xl bg-danger-soft text-danger">
        <AlertIcon className="h-7 w-7" />
      </span>
      <h1 className="mt-4 font-serif text-xl font-semibold">This page could not load</h1>
      <p className="mt-2 text-sm leading-relaxed text-muted">The API did not return the data for this page. It may be restarting, or your role may not include this area.</p>
      {error.digest && <p className="num mt-2 text-xs text-muted">Reference {error.digest}</p>}
      <div className="mt-6 flex gap-2">
        <button onClick={reset} className="btn btn-primary btn-sm">
          <RefreshIcon className="h-4 w-4" /> Try again
        </button>
        <Link href="/" className="btn btn-quiet btn-sm">
          <ActionIcons.DashboardIcon />Dashboard
        </Link>
      </div>
    </div>
  );
}