"use client"
 
import { useQueryState } from "@/hooks/use-query-state"
 
export function Component() {
  const { values, setState } = useQueryState(["search", "page"], {
    defaults: { page: "1" },
  })
 
  // Update single parameter
  setState({ search: "react hooks" })
 
  // Update multiple parameters
  setState({ search: "advanced", page: "2" })
 
  // Remove parameter
  setState({ search: null })
 
  return (
    <div>
      <h1>Search: {values.search}</h1>
      <h2>Page: {values.page}</h2>
      <button onClick={() => setState({ search: "react hooks" })}>
        Set Search
      </button>
      <button onClick={() => setState({ page: "2" })}>Set Page</button>
      <button onClick={() => setState({ search: null })}>Remove Search</button>
    </div>
  )
}

const { values, setState } = useQueryState(["search", "page"], {
  defaults: { page: "1" },
})
 
// Update single parameter
setState({ search: "react hooks" })
 
// Update multiple parameters
setState({ search: "advanced", page: "2" })
 
// Remove parameter
setState({ search: null })

const { values, errors } = useQueryState(["page", "limit"], {
  defaults: { page: "1", limit: "10" },
  validators: {
    page: (val) => {
      const num = parseInt(val)
      return num > 0 ? num : null
    },
    limit: (val) => {
      const num = parseInt(val)
      return num > 0 && num <= 100 ? num : null
    },
  },
})
 
// values.page will be string, but validated as number
// errors.page will contain message if validation fails

const { values, isPending, setState } = useQueryState(
  ['filters'],
  { suspense: true }
)
 
// Updates will use React transitions
setState({ filters: JSON.stringify(complexFilters) })
 
// Can show loading state
{isPending && <LoadingIndicator />}

const { batchUpdate } = useQueryState(["sort", "direction", "page"])
 
// Only updates registered parameters
batchUpdate({
  sort: "price",
  direction: "asc",
  page: "1",
  unrelated: "value", // will be ignored
})