components/MainContent.js

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 ${isMobile ? 'mt-0' : 'mt-4'}`}>
        {/* 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`,
            maxHeight: isMobile ? '70vh' : 'none',
            objectFit: 'cover',
            objectPosition: 'center'
          }}
          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;