Hooks

import {
  useCallingClient,
  useCallingReady,
  useCall,
  useIncomingCall,
  useWakingForCall,
} from '@alaznah/calling';

export function Dialer() {
  const client = useCallingClient();
  const ready = useCallingReady();
  const call = useCall();
  const incoming = useIncomingCall();
  const waking = useWakingForCall();

  if (waking) return <Text>Joining call…</Text>;
  if (!ready) return <Text>Connecting…</Text>;

  if (incoming?.state === 'ringing') {
    return (
      <>
        <Text>Incoming from {incoming.peerId}</Text>
        {/* Prefer swipe UX in production — see Incoming Calls */}
        <Button title="Accept" onPress={() => client.accept(incoming.callId)} />
        <Button title="Decline" onPress={() => client.reject(incoming.callId, 'declined')} />
      </>
    );
  }

  if (call && !['ended', 'failed', 'rejected', 'missed', 'busy'].includes(call.state)) {
    return (
      <>
        <Text>
          {call.state} · {call.peerId}
        </Text>
        <Button title="Mute" onPress={() => client.setMuted(!call.muted)} />
        <Button title="End" onPress={() => client.end()} />
      </>
    );
  }

  return (
    <Button
      title="Call Alice"
      onPress={() => client.startCall({ calleeId: 'alice', mediaType: 'audio' })}
    />
  );
}