import { useState, useEffect } from "react";
import { api } from "../api/client";

export interface SystemProviders {
  whisperAvailable: boolean;
  piperAvailable: boolean;
}

export function useSystemProviders(): { providers: SystemProviders | null; loading: boolean } {
  const [providers, setProviders] = useState<SystemProviders | null>(null);

  useEffect(() => {
    api
      .get<{ voiceCapability?: { whisperAvailable?: boolean; piperAvailable?: boolean } }>(
        "/system/providers",
      )
      .then((data) => {
        const vc = data.voiceCapability;
        setProviders({
          whisperAvailable: vc?.whisperAvailable ?? false,
          piperAvailable: vc?.piperAvailable ?? false,
        });
      })
      .catch(() => {
        // Graceful degradation — badge simply won't show
        setProviders(null);
      });
  }, []);

  return { providers, loading: providers === null };
}
