import { useLayoutEffect, useState } from "preact/hooks";
import { snapshot, subscribe } from "../app/store.ts";
import { SPRITES, spriteURL } from "../sprites.ts";
export function useApp() {
  const [revision, setRevision] = useState(snapshot);
  useLayoutEffect(() => {
    const update = () => setRevision(snapshot());
    const unsubscribe = subscribe(update);
    update();
    return unsubscribe;
  }, []);
  return revision;
}
export function Icon({
  name,
  scale = 3,
  alt = "",
}: {
  name: string;
  scale?: number;
  alt?: string;
}) {
  const rows = SPRITES[name];
  return rows ? (
    <img
      class="px-icon"
      src={spriteURL(name, scale)}
      alt={alt}
      width={rows[0].length * scale}
      height={rows.length * scale}
    />
  ) : null;
}