/**
 * @file SagiMount.tsx
 * @description Gate for the Sagi mascot: follows the enabled preference
 *   (`useSagiEnabled`) and only while it is on lazy-loads and mounts `Sagi` — so
 *   a disabled mascot costs no chunk download, no brain, no 1 Hz tick and no
 *   WebSocket reducer.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { lazy, Suspense, useEffect, useState } from "react";
import { sagiPrefs } from "./prefs";

const Sagi = lazy(() => import("./Sagi").then((m) => ({ default: m.Sagi })));

/** The mascot's enabled preference, followed live (Settings, other tabs). */
export function useSagiEnabled(): boolean {
  const [enabled, setEnabled] = useState(() => sagiPrefs.getEnabled());
  useEffect(() => sagiPrefs.subscribe(() => setEnabled(sagiPrefs.getEnabled())), []);
  return enabled;
}

export function SagiMount() {
  if (!useSagiEnabled()) return null;
  return (
    <Suspense fallback={null}>
      <Sagi />
    </Suspense>
  );
}