"use client"

import * as React from "react"
import { ErrorBoundary } from "@/registry/ui/error-boundary"

function Bomb({ explode }: { explode: boolean }) {
  if (explode) {
    throw new Error("Kaboom — this component failed to render.")
  }
  return (
    <p className="text-sm text-muted-foreground">
      Component rendered successfully.
    </p>
  )
}

export default function ErrorBoundaryDemo() {
  const [explode, setExplode] = React.useState(false)
  const [key, setKey] = React.useState(0)

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <ErrorBoundary key={key}>
        <Bomb explode={explode} />
      </ErrorBoundary>
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => setExplode(true)}
          className="rounded-xl border px-3 py-1.5 text-sm hover:bg-accent"
        >
          Trigger error
        </button>
        <button
          type="button"
          onClick={() => {
            setExplode(false)
            setKey((k) => k + 1)
          }}
          className="rounded-xl border px-3 py-1.5 text-sm hover:bg-accent"
        >
          Reset
        </button>
      </div>
    </div>
  )
}