import { useVidtreoRecorder } from '@vidtreo/recorder-react';

function ScreenRecorder() {
  const { state, actions } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
    onUploadComplete: (result) => console.log(result.uploadUrl),
  });

  return (
    <div>
      <video
        ref={(el) => el && state.stream && (el.srcObject = state.stream)}
        autoPlay
        muted
        playsInline
      />

      {state.recordingState === 'idle' && (
        <button onClick={() => actions.startRecording('screen')}>
          Grabar Pantalla
        </button>
      )}

      {state.recordingState === 'recording' && (
        <button onClick={() => actions.stopRecording()}>
          Detener Grabación
        </button>
      )}
    </div>
  );
}

import { VidtreoRecorder } from '@vidtreo/recorder-react';

function SwitchableRecorder() {
  return (
    <VidtreoRecorder
      apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
      enableSourceSwitching={true}
      lang="es"
      onUploadComplete={(result) => {
        console.log('Video:', result.uploadUrl);
      }}
    />
  );
}

function ScreenOnlyRecorder() {
  const { state, actions } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
    enableSourceSwitching: false,
  });

  useEffect(() => {
    // Comenzar directamente con pantalla
    actions.startPreview('screen');
  }, []);

  return (
    <div>
      <video
        ref={(el) => el && state.stream && (el.srcObject = state.stream)}
        autoPlay
        muted
      />
      <button
        onClick={() =>
          state.recordingState === 'idle'
            ? actions.startRecording('screen')
            : actions.stopRecording()
        }
      >
        {state.recordingState === 'idle' ? 'Grabar' : 'Detener'}
      </button>
    </div>
  );
}