"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

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

  return (
    <div className="min-h-screen bg-[#f4f7fb] px-4 py-6 sm:px-6 lg:px-8">
      <div className="mx-auto w-full max-w-3xl">
        <Card>
          <CardHeader>
            <h2 className="text-xl font-semibold text-[#1f2a40]">Ocurrio un error inesperado</h2>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-[#64718a]">No pudimos completar la accion solicitada. Puedes intentar nuevamente.</p>
            <Button onClick={reset}>Reintentar</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
