"use client"
 
import * as React from "react"
 
import { useDefault } from "@/hooks/use-default"
 
export function Component() {
  const initialState = { name: "Tyler" }
  const defaultState = { name: "Ben" }
 
  const [user, setUser] = useDefault(initialState, defaultState)
 
  return (
    <section>
      <h1>useDefault</h1>
 
      <button
        title="Sets the value to Lynn"
        className="link"
        onClick={() => setUser({ name: "Lynn" })}
      >
        Lynn
      </button>
      <button
        title="Sets the value to Tyler"
        className="link"
        onClick={() => setUser({ name: "Tyler" })}
      >
        Tyler
      </button>
      <button
        title="Sets the value to null causing it to use the default value"
        className="link"
        onClick={() => setUser(null)}
      >
        Null
      </button>
      <pre>
        <code>{JSON.stringify(user)}</code>
      </pre>
    </section>
  )
}

const Example1 = () => {
  // type: [number, React.Dispatch<React.SetStateAction<number | null>>]
  const [value, setValue] = useDefault<number | null, number>(null, 0)
  // value will be 0 initially (default), then number when set
  return <div>{value}</div>
}

const Example2 = () => {
  // inferred as [string, React.Dispatch<React.SetStateAction<undefined>>]
  const [text, setText] = useDefault(undefined, "default")
  // text will be 'default' initially, then string when set
  return <div>{text}</div>
}

const Example3 = () => {
  // explicit typing shows union type result
  const [data, setData] = useDefault<string | null, boolean>(null, true)
  // data has type: string | boolean
  return <div>{data.toString()}</div>
}