"use client";

import { useEffect } from "react";
import { AlertTriangle, RotateCcw, Home } from "lucide-react";
import { Button } from "@/components/ui/Button";

// Next.js requires this file to be a Client Component to catch
// render/runtime errors thrown anywhere below the root layout — without
// it, an unhandled error falls through to Next.js's own generic screen.
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Logged client-side only — there's no error-tracking service wired
    // up yet, so this is the only trace of it for now.
    console.error(error);
  }, [error]);

  return (
    <div className="flex min-h-dvh flex-col items-center justify-center gap-4 px-6 text-center">
      <span className="flex h-16 w-16 items-center justify-center rounded-2xl bg-danger/12">
        <AlertTriangle size={26} strokeWidth={2} className="text-danger" />
      </span>
      <div>
        <h1 className="font-display text-lg font-semibold">Something went wrong</h1>
        <p className="mt-1.5 max-w-sm text-sm text-muted">
          That's on us, not you. Try again, or head back to the dashboard if it keeps happening.
        </p>
      </div>
      <div className="mt-2 flex gap-3">
        <Button variant="secondary" onClick={reset}>
          <RotateCcw size={15} /> Try Again
        </Button>
        <Button onClick={() => (window.location.href = "/")}>
          <Home size={15} /> Go to Dashboard
        </Button>
      </div>
    </div>
  );
}