"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { AlertCircle } from "lucide-react";
import Link from "next/link";

export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Poli KB page error:", error);
  }, [error]);

  return (
    <div className="min-h-[70vh] flex items-center justify-center bg-background-custom p-4">
      <div className="max-w-md w-full bg-white rounded-3xl p-8 shadow-lg text-center">
        <div className="w-20 h-20 bg-[#0022ba]/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <AlertCircle className="w-10 h-10 text-[#0022ba]" />
        </div>

        <h2 className="text-2xl font-semibold text-[#191919] mb-3">
          Terjadi Kesalahan
        </h2>

        <p className="text-[#6D6D6D] mb-6 leading-relaxed">
          Maaf, terjadi kesalahan saat memuat halaman Poli KB. Silakan coba lagi
          atau kembali ke halaman utama.
        </p>

        {error.digest && (
          <p className="text-xs text-[#6D6D6D]/60 mb-6 font-mono">
            Error ID: {error.digest}
          </p>
        )}

        <div className="flex flex-col gap-3">
          <Button
            onClick={reset}
            className="w-full bg-[#0022ba] hover:bg-[#0022ba]/90 text-white font-medium py-3 h-auto rounded-full"
          >
            Coba Lagi
          </Button>

          <Link href="/" className="w-full">
            <Button
              variant="outline"
              className="w-full border-[#0022ba] text-[#0022ba] hover:bg-[#0022ba]/5 font-medium py-3 h-auto rounded-full"
            >
              Kembali ke Beranda
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}