import { useScreenShare } from '@/hooks/use-screen-share'

const { isScreenSharing, startScreenShare, stopScreenShare } = useScreenShare({
  userId: 'user-id',
  userName: 'User Name',
})

// Start
await startScreenShare({ quality: '1080p' })

// Stop
stopScreenShare()

await startRecording(stream, {
  format: 'webm', // or 'mp4'
  quality: 'high', // 'low', 'medium', 'high'
  includeWebcam: true, // Add webcam overlay
  webcamSize: 'small', // 'small', 'medium', 'large'
  webcamPosition: 'bottom-right', // 4 corners
})

// Adaptive quality based on network
const quality = getOptimalQuality(networkSpeed)

// Lower frame rate for better performance
await startScreenShare({ frameRate: 15 })

// Update quality dynamically
await updateQuality(shareId, '720p')

// Always check permissions
if (!ScreenCaptureManager.isSupported()) {
  // Show error
}

// Handle permission denial
try {
  await startScreenShare()
} catch (error) {
  if (error.name === 'NotAllowedError') {
    // User denied
  }
}

const captureManager = createScreenCaptureManager({
  onStreamStarted: (stream) => {
    // Stream started
  },
  onStreamEnded: (streamId) => {
    // Stream ended
  },
  onError: (error) => {
    // Handle error
  },
  onTrackEnded: (kind) => {
    // Track ended (video/audio)
  },
})

await startScreenShare({
  quality: '1080p',
  captureSystemAudio: true,
  captureCursor: true,
})

await startRecording(screenStream, {
  includeWebcam: true,
  webcamPosition: 'bottom-right',
})

annotator.setTool('pen')
annotator.setColor('#FF0000')
annotator.setStrokeWidth(4)

highlighter.updateCursor({
  x: 100,
  y: 200,
  userId: 'user-id',
  userName: 'User Name',
  timestamp: Date.now(),
})

<CallModal
  isScreenSharing={isScreenSharing}
  onToggleScreenShare={() => {
    if (isScreenSharing) {
      stopScreenShare()
    } else {
      startScreenShare()
    }
  }}
  currentUserId={user.id}
  currentUserName={user.name}
  {...otherProps}
/>