'use client'
import { configure } from "next-typed-search-params";

configure({ arrayFormat: "bracket-separator" })

import { useSearchParams } from "next-typed-search-params";

export const Component = ({}: PropsType) => {
    const [searchParams, setSearchParams] = useSearchParams((z) => ({
        productId: z.coerce.number().array(),
        value: z.coerce.number().default(0),
        date: z.coerce.string().optional()
    }));

    const handleClick = () => {
        setSearchParams({
            ...searchParams,
            value: searchParams.value + 1
        })
    }

    return (<button onClick={handleClick}>click {searchParams.value}</button>);
};