import { useMap } from "~/hooks/useMap";
 
function Component() {
  const map = useMap<string, number>([
    ["a", 1],
    ["b", 2],
    ["c", 3],
  ]);
 
  const setValue = (key: string, value: number) => {
    map.set(key, value);
  };
 
  const deleteValue = (key: string) => {
    map.delete(key);
  };
 
  const clearValues = () => {
    map.clear();
  };
 
  const initializeValues = () => {
    map.initialize([
      ["a", 1],
      ["b", 2],
      ["c", 3],
    ]);
  };
 
  return (
    <div>
      <button onClick={() => setValue("d", 4)}>Set value</button>
      <button onClick={() => deleteValue("b")}>Delete value</button>
      <button onClick={clearValues}>Clear values</button>
      <button onClick={initializeValues}>Initialize values</button>
    </div>
  );
}

function useMap<K, V>(
  initialEntries?: Iterable<[K, V]> | [] | (() => Iterable<[K, V]>),
): [ReadonlyMap<K, V>, MapActions<K, V>];