import React from 'react'; import ThoughtBubble from './ThoughtBubble'; import ParticleEffects from './ParticleEffects'; import PromptEditor from './PromptEditor'; import CameraSetup from './CameraSetup'; import { StatusIndicator } from './UIUtils'; const MainContent = ({ videoRef, canvasRef, containerRef, facingMode, setFacingMode, setCameraError, customPrompt, setCustomPrompt, isMac, isMobile, canvasWidth, canvasHeight, setVideoAspectRatio, updateCanvasSize, handDetected, isMouthOpen, isLeftHand, thumbPosition, isFirstLoad, thought, isThinking, animateThinking, particles, popParticles, createSparkleParticles, createPopParticles }) => { return ( <> {/* Prompt Editor - Only show above camera on desktop */} {!isMobile && ( <PromptEditor customPrompt={customPrompt} setCustomPrompt={setCustomPrompt} isMac={isMac} isMobile={isMobile} /> )} <div ref={containerRef} className="relative w-full max-w-4xl canvas-container"> {/* Camera Setup */} <CameraSetup videoRef={videoRef} canvasRef={canvasRef} containerRef={containerRef} facingMode={facingMode} setFacingMode={setFacingMode} setCameraError={setCameraError} setVideoAspectRatio={setVideoAspectRatio} updateCanvasSize={updateCanvasSize} isMobile={isMobile} /> {/* Canvas for hand detection */} <canvas ref={canvasRef} className="rounded-lg shadow-lg w-full" style={{ height: `${canvasHeight}px` }} width={canvasWidth} height={canvasHeight} /> {/* Status Indicator */} <StatusIndicator handDetected={handDetected} /> {/* Particle Effects */} <ParticleEffects particles={particles} popParticles={popParticles} /> {/* Thought Bubble */} <ThoughtBubble isFirstLoad={isFirstLoad} isThinking={isThinking} thought={thought} isMouthOpen={isMouthOpen} handDetected={handDetected} isLeftHand={isLeftHand} thumbPosition={thumbPosition} canvasWidth={canvasWidth} isMobile={isMobile} animateThinking={animateThinking} createSparkleParticles={createSparkleParticles} createPopParticles={createPopParticles} /> </div> {/* Prompt Editor - Show below camera on mobile */} {isMobile && ( <PromptEditor customPrompt={customPrompt} setCustomPrompt={setCustomPrompt} isMac={isMac} isMobile={isMobile} /> )} </> ); }; export default MainContent;