frontend/src/editor/frontmatter/useFrontmatter.ts

import { useState, useEffect, useCallback } from "react";
import type { FrontmatterStore, FrontmatterData } from "./frontmatter-store";

export function useFrontmatter(store: FrontmatterStore | null) {
  const [data, setData] = useState<FrontmatterData | null>(null);

  useEffect(() => {
    if (!store) return;
    setData(store.getAll());
    return store.observe(() => setData(store.getAll()));
  }, [store]);

  const update = useCallback(
    <K extends keyof FrontmatterData>(key: K, value: FrontmatterData[K]) => {
      store?.set(key, value);
    },
    [store],
  );

  const updateAll = useCallback(
    (partial: Partial<FrontmatterData>) => {
      store?.setAll(partial);
    },
    [store],
  );

  return { data, update, updateAll };
}