import { useEffect } from 'react';
import { fetchSnifferStatus } from '../api/apiClient';
import { useBackendAPI } from '../hooks/useBackendAPI';

export default function Sniffing() {
  const {
    interfacesQuery,
    bridgesQuery,
    createBridge,
    removeBridge,
    fetchBridges,
    fetchInterfaces,
    refreshBridges,
    refreshInterfaces,
    isCreating,
    isRemoving,
    snifferStatusQuery,
  } = useBackendAPI();

  // fetch on mount (explicit, since queries are disabled by default)
  useEffect(() => {
    fetchInterfaces().catch(() => {});
    fetchSnifferStatus().catch(() => {});
  }, []);

  const bridges = bridgesQuery.data ?? [];
  const snifferStatus = snifferStatusQuery.data;
  return (
    <div className="sniffing-body">
      <h1>Sniffing</h1>
    </div>
  );
}