src/components/VideoCapture.tsx

import GlassButton from "./GlassButton";
import GlassContainer from "./GlassContainer";
import { GLASS_EFFECTS } from "../constants";

interface VideoCaptureProps {
  isRunning: boolean;
  onToggleRunning: () => void;
  error?: string | null;
  videoMode: "camera" | "upload";
}

export default function VideoCapture({ isRunning, onToggleRunning, error, videoMode }: VideoCaptureProps) {
  const hasError = Boolean(error);
  const [statusText, statusColor, containerBgColor] = hasError
    ? ["Error", "bg-red-500", GLASS_EFFECTS.COLORS.ERROR_BG]
    : isRunning
      ? ["Live", "bg-green-500 animate-pulse", GLASS_EFFECTS.COLORS.DEFAULT_BG]
      : ["Paused", "bg-red-500", GLASS_EFFECTS.COLORS.DEFAULT_BG];

  const modeText = videoMode === "camera" ? "Camera" : "Video";

  return (
    <>
      {/* Control buttons - positioned absolutely over the video */}
      <div className="absolute top-4 right-4 flex space-x-2 z-20">
        <GlassButton onClick={onToggleRunning} aria-label={isRunning ? "Pause captioning" : "Resume captioning"}>
          {isRunning ? "Pause" : "Resume"}
        </GlassButton>
      </div>

      {/* Status indicator with glass morphism */}
      <div className="absolute top-4 left-4 z-20">
        <GlassContainer
          bgColor={containerBgColor}
          className="px-3 py-2 rounded-lg"
          role="status"
          aria-label={`Caption status: ${statusText}`}
        >
          <div className="flex items-center space-x-3">
            <div className="flex items-center space-x-2">
              <div className={`w-2 h-2 rounded-full ${statusColor}`} />
              <span className="text-white text-sm font-medium">{statusText}</span>
            </div>
            <div className="w-px h-4 bg-white/30" />
            <span className="text-white text-sm font-medium opacity-80">{modeText}</span>
          </div>
        </GlassContainer>
      </div>
    </>
  );
}