import {
  ConnectivityProvider,
  Connectivity,
  useConnectivity,
  useAction,
  browserOnlineDetector,
  actionOptions,
} from '@connectivity-js/react';

// 1. Wrap your app
function App() {
  return (
    <ConnectivityProvider
      detectors={[browserOnlineDetector()]}
      gracePeriodMs={3_000}
    >
      <MyApp />
    </ConnectivityProvider>
  );
}

// 2. Declarative offline UI
function Page() {
  return (
    <Connectivity fallback={<OfflineBanner />} delayMs={2_000}>
      <MainContent />
    </Connectivity>
  );
}

// 3. Status hook
function StatusBadge() {
  const { status } = useConnectivity();
  if (status === 'offline') return <span>Offline</span>;
  return <span>Online</span>;
}

// 4. Action with offline queue
const saveAction = actionOptions({
  actionKey: 'save',
  request: (input: { id: string; data: string }) => api.save(input),
  dedupeKey: (input) => input.id,
  whenOffline: 'queue',
});

function SaveButton({ id, data }: { id: string; data: string }) {
  const { execute, pendingCount } = useAction(saveAction, {
    onSuccess: () => toast.success('Saved'),
    onEnqueued: () => toast.info('Queued — will sync when back online'),
  });

  return (
    <button onClick={() => execute({ id, data })}>
      Save {pendingCount > 0 && `(${pendingCount} pending)`}
    </button>
  );
}