"use client";

import { useEffect } from "react";
import Link from "next/link";
import { RefreshCw, Home, AlertTriangle } from "lucide-react";

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function GlobalError({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Log to error monitoring (Sentry, etc.) when integrated
    console.error("[DriveHub Error]", error);
  }, [error]);

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4 py-16 bg-[#f6f8fc]">
      <div className="max-w-lg w-full text-center">
        {/* Icon */}
        <div className="w-20 h-20 rounded-[24px] bg-red-50 border border-red-100 flex items-center justify-center mx-auto mb-6">
          <AlertTriangle className="w-9 h-9 text-red-500" />
        </div>

        <h1 className="text-2xl md:text-3xl font-black text-gray-900 mb-3">
          Something Went Wrong
        </h1>
        <p className="text-gray-500 text-base leading-relaxed mb-2 max-w-sm mx-auto">
          An unexpected error occurred. Our team has been notified and is
          working on a fix.
        </p>

        {/* Error code if available */}
        {error.digest && (
          <p className="text-[11px] text-gray-400 font-mono mb-6">
            Error ID: {error.digest}
          </p>
        )}

        {/* Actions */}
        <div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
          <button
            onClick={reset}
            className="inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-blue-100 hover:scale-105 transition-all duration-300"
          >
            <RefreshCw className="w-4 h-4" />
            Try Again
          </button>
          <Link
            href="/"
            className="inline-flex items-center justify-center gap-2 rounded-2xl bg-white border border-gray-200 px-6 py-3 text-sm font-semibold text-gray-700 hover:border-blue-200 hover:text-blue-600 transition-all duration-300"
          >
            <Home className="w-4 h-4" />
            Go Home
          </Link>
        </div>
      </div>
    </div>
  );
}