"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 and to live at
// app/error.tsx (or nested per route segment) to catch render/runtime
// errors thrown anywhere below it — without it, an unhandled error falls
// through to Next.js's own generic error screen instead of this one.
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 (see README), so this is the only trace of it for now.
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pt-safe text-center">
      <span className="flex h-16 w-16 items-center justify-center rounded-3xl bg-danger/15">
        <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-xs text-sm text-muted">
          That's on us, not you. Try again, or head back home if it keeps happening.
        </p>
      </div>
      <div className="mt-2 flex w-full max-w-xs flex-col gap-2.5">
        <Button fullWidth onClick={reset}>
          <RotateCcw size={16} /> Try Again
        </Button>
        <Button fullWidth variant="secondary" onClick={() => (window.location.href = "/home")}>
          <Home size={16} /> Go Home
        </Button>
      </div>
    </div>
  );
}