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

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

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

function RecorderWithState() {
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);

  return (
    <div>
      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        lang="es"
        onRecordingStop={() => setIsUploading(true)}
        onUploadComplete={(result) => {
          setVideoUrl(result.uploadUrl);
          setIsUploading(false);
        }}
      />

      {isUploading && <p>Procesando video...</p>}

      {videoUrl && (
        <div>
          <h3>Tu Grabación</h3>
          <video src={videoUrl} controls style={{ maxWidth: '100%' }} />
        </div>
      )}
    </div>
  );
}

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
  lang="es"
  userMetadata={{
    userId: 'user-123',
    projectId: 'project-456',
    type: 'feedback',
    timestamp: new Date().toISOString()
  }}
  onUploadComplete={(result) => {
    saveToDatabase({
      videoId: result.recordingId,
      url: result.uploadUrl
    });
  }}
/>

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
  lang="es"
  maxRecordingTime={60000}  // 1 minuto
  countdownDuration={3000}   // cuenta regresiva de 3 segundos
  onRecordingStop={() => {
    console.log('Grabación terminada');
  }}
/>