"use client"
 
import { useStateValidator } from "@/hooks/use-state-validator"
 
export function Component() {
  const { state, setState, result } = useStateValidator({
    initialValue: 0,
    validator: (value) => value >= 0,
    onInvalid: () => console.warn("Invalid state value"),
    onValid: () => console.log("State value is valid"),
    throwOnInvalid: false,
    asyncDebounceMs: 300,
  })
 
  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
      <h1>State Validator Example</h1>
      <p>Current State: {state}</p>
      <button onClick={() => setState((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setState((prev) => prev - 1)}>Decrement</button>
      {result.isPending && <p>Validating...</p>}
      {!result.isValid && <p style={{ color: "red" }}>Error: {result.error}</p>}
    </div>
  )
}