import { useEffect, useState } from "react";
import { api } from "../lib/api";
import { onUserFontsChanged, type UserFontRow } from "../lib/fontImport";

/** The visible user-imported fonts; reloads when the Settings font table changes them. Empty while loading or on error. */
export function useUserFonts(): UserFontRow[] {
  const [fonts, setFonts] = useState<UserFontRow[]>([]);
  useEffect(() => {
    let active = true;
    const load = () =>
      api
        .listUserFonts()
        .then((rows) => active && setFonts(rows))
        .catch(() => active && setFonts([]));
    void load();
    const off = onUserFontsChanged(() => void load());
    return () => {
      active = false;
      off();
    };
  }, []);
  return fonts;
}