"use client";
import { AlertTriangle } from "lucide-react";

export default function Error({ reset }: { error: Error; reset: () => void }) {
  return (
    <div className="min-h-screen grid place-items-center p-8">
      <div className="text-center max-w-md">
        <div className="h-14 w-14 mx-auto rounded-full bg-rose-50 text-rose-500 grid place-items-center">
          <AlertTriangle className="h-7 w-7" />
        </div>
        <h1 className="text-xl font-bold mt-4">Something went wrong</h1>
        <p className="text-slate-500 text-sm mt-2">
          An unexpected error occurred. You can try again or head back to the dashboard.
        </p>
        <div className="flex gap-3 justify-center mt-6">
          <button onClick={reset} className="bg-brand-600 text-white px-5 py-2 rounded-lg text-sm font-semibold">
            Try again
          </button>
          <a href="/dashboard" className="border border-slate-200 px-5 py-2 rounded-lg text-sm font-medium">
            Go to dashboard
          </a>
        </div>
      </div>
    </div>
  );
}