"use client";

import React from "react";
import Link from "next/link";
import { AlertTriangle } from "lucide-react";

import { Button } from "@/components/ui/button";

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

const ErrorPage = ({ error, reset }: ErrorPageProps) => {
  console.error('🔥 ERROR PAGE: Error caught:', error);
  console.error('🔥 ERROR PAGE: Error message:', error?.message);
  console.error('🔥 ERROR PAGE: Error stack:', error?.stack);
  console.error('🔥 ERROR PAGE: Error digest:', error?.digest);
  
  return (
    <div className="h-screen flex flex-col gap-y-4 items-center justify-center">
      <AlertTriangle className="size-6 text-red-500" />
      <p className="text-sm text-muted-foreground">Something went wrong</p>
      {error && (
        <div className="text-xs text-red-600 max-w-md text-center">
          <p>Error: {error.message}</p>
          {error.digest && <p>Digest: {error.digest}</p>}
        </div>
      )}
      <div className="flex gap-2">
        <Button variant="outline" size="sm" asChild>
          <Link href="/">Back to Home</Link>
        </Button>
        {reset && (
          <Button variant="outline" size="sm" onClick={reset}>
            Try Again
          </Button>
        )}
      </div>
    </div>
  );
};

export default ErrorPage;
