"use client";

import { useEffect } from "react";

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

  return (
    <div
      style={{
        padding: "20px",
        margin: "20px auto",
        maxWidth: "600px",
        textAlign: "center",
        border: "1px solid #ddd",
        borderRadius: "8px",
        backgroundColor: "#fafafa",
      }}
    >
      <h2>Oops! Something went wrong</h2>
      <p>We encountered an error while loading the page.</p>
      <details
        style={{
          marginTop: "20px",
          textAlign: "left",
          backgroundColor: "#f5f5f5",
          padding: "10px",
          borderRadius: "4px",
        }}
      >
        <summary style={{ cursor: "pointer", fontWeight: "bold" }}>
          Error details
        </summary>
        <pre
          style={{
            marginTop: "10px",
            fontSize: "12px",
            whiteSpace: "pre-wrap",
            wordBreak: "break-word",
          }}
        >
          {error.message}
          {error.stack && `\n\nStack trace:\n${error.stack}`}
        </pre>
      </details>
      <button
        onClick={reset}
        style={{
          marginTop: "20px",
          padding: "10px 20px",
          backgroundColor: "#BC955C",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: "pointer",
          fontSize: "16px",
        }}
      >
        Try again
      </button>
    </div>
  );
}