"use client";
import { useEffect } from "react";
import { motion } from "framer-motion";
import { AlertTriangle, RefreshCw, Home } from "lucide-react";
import { useRouter } from "next/navigation";

export default function MarketplaceError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const router = useRouter();

  useEffect(() => {
    console.error("[Marketplace Error]", error);
  }, [error]);

  return (
    <div
      className="min-h-full flex items-center justify-center px-4"
      style={{ background: "var(--bg)" }}
    >
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ type: "spring", stiffness: 280, damping: 26 }}
        className="text-center max-w-sm"
      >
        <div
          className="w-20 h-20 rounded-3xl flex items-center justify-center mx-auto mb-5"
          style={{ background: "rgba(248,113,113,0.1)", border: "1px solid rgba(248,113,113,0.25)" }}
        >
          <AlertTriangle size={36} color="#f87171" />
        </div>
        <h2 className="text-xl font-black text-[var(--text-primary)] mb-2">Something went wrong</h2>
        <p className="text-sm text-[var(--text-muted)] mb-6 leading-relaxed">
          {error.message || "An unexpected error occurred in the Marketplace. Please try again."}
        </p>
        <div className="flex gap-3 justify-center">
          <button
            onClick={reset}
            className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm text-white"
            style={{ background: "var(--accent)" }}
          >
            <RefreshCw size={14} />
            Try Again
          </button>
          <button
            onClick={() => router.push("/marketplace")}
            className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm"
            style={{ background: "var(--card)", color: "var(--text-muted)", border: "1px solid var(--border)" }}
          >
            <Home size={14} />
            Home
          </button>
        </div>
      </motion.div>
    </div>
  );
}