"use client";

import { useEffect } from "react";
import Link from "next/link";
import { RotateCw } from "lucide-react";

/**
 * Isolates failures to the dashboard content area — the surrounding
 * `(dashboard)/layout.tsx` chrome (nav, drawer, tab bar) stays mounted and
 * usable, so a broken page doesn't strand the user with no way out.
 */
export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="rounded-xl bg-white p-10 text-center shadow-sm ring-1 ring-gray-100">
      <h2 className="mb-2 text-lg font-bold text-gray-900">Couldn&apos;t load this page</h2>
      <p className="mx-auto mb-6 max-w-sm text-sm text-gray-500">
        Something went wrong while fetching your data. Please try again.
      </p>
      {error.digest && (
        <p className="mb-5 font-mono text-xs text-gray-400">Reference: {error.digest}</p>
      )}
      <div className="flex flex-wrap justify-center gap-3">
        <button
          onClick={reset}
          className="inline-flex items-center gap-2 rounded-lg bg-[#CC1414] px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#A50E0E]"
        >
          <RotateCw size={14} /> Try Again
        </button>
        <Link
          href="/dashboard"
          className="rounded-lg border border-gray-200 px-5 py-2.5 text-sm font-semibold text-gray-700 transition-colors hover:border-[#CC1414] hover:text-[#CC1414]"
        >
          Back to Dashboard
        </Link>
      </div>
    </div>
  );
}