"use client"
 
import * as React from "react"
 
import { useErrorBoundary } from "@/hooks/use-error-boundary"
 
function FaultyComponent() {
  const [count, setCount] = React.useState(0)
 
  if (count >= 3) {
    throw new Error("Count exceeded limit of 3")
  }
 
  return (
    <button
      onClick={() => setCount(count + 1)}
      className="rounded bg-blue-500 px-4 py-2 text-white"
    >
      Increment Count: {count}
    </button>
  )
}
 
function ErrorFallback({ reset }: { reset: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3">
      <h2>Something went wrong!</h2>
      <button
        onClick={reset}
        className="rounded bg-blue-500 px-4 py-2 text-white"
      >
        Try Again
      </button>
    </div>
  )
}
 
export function Component() {
  const { ErrorBoundary, hasError, error, resetError } = useErrorBoundary()
 
  return (
    <div>
      <ErrorBoundary fallback={<ErrorFallback reset={resetError} />}>
        <FaultyComponent />
      </ErrorBoundary>
      {hasError && error && (
        <div>
          <p>Error: {error.message}</p>
        </div>
      )}
    </div>
  )
}