'use client';

import { useEffect } from 'react';
import { AlertTriangle, RefreshCw } from 'lucide-react';

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

export default function DashboardError({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.error('[DashboardError]', error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center p-6">
      <div className="inline-flex items-center justify-center w-14 h-14 bg-red-50 rounded-2xl mb-5">
        <AlertTriangle className="w-7 h-7 text-red-500" />
      </div>
      <h2 className="text-xl font-bold text-gray-900 mb-2">
        Gagal Memuat Halaman
      </h2>
      <p className="text-gray-500 text-sm mb-6 max-w-xs leading-relaxed">
        Terjadi kesalahan saat memuat halaman ini. Silakan coba lagi.
      </p>

      {process.env.NODE_ENV === 'development' && (
        <pre className="mb-6 text-left text-xs bg-gray-900 text-red-400 p-3 rounded-xl max-w-sm w-full overflow-auto max-h-32 whitespace-pre-wrap">
          {error.message}
        </pre>
      )}

      <button
        onClick={reset}
        className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors"
      >
        <RefreshCw className="w-4 h-4" />
        Coba Lagi
      </button>
    </div>
  );
}