src/components/LiveCaption.tsx

import { PROMPTS, GLASS_EFFECTS } from "../constants";
import GlassContainer from "./GlassContainer";

interface LiveCaptionProps {
  caption: string;
  isRunning?: boolean;
  error?: string | null;
}

export default function LiveCaption({ caption, isRunning, error }: LiveCaptionProps) {
  const content = error || caption;

  const { color, label } = error
    ? { color: "bg-red-500", label: "ERROR" }
    : isRunning
      ? { color: "bg-green-500 animate-pulse", label: "RUNNING" }
      : { color: "bg-yellow-500 animate-pulse", label: "STOPPED" };

  return (
    <GlassContainer

      bgColor={error ? GLASS_EFFECTS.COLORS.ERROR_BG : GLASS_EFFECTS.COLORS.DEFAULT_BG}

      className={`w-150 h-45 rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200 ${

        error ? "border border-red-500/30" : ""

      }`}

    >

      <div className="p-5 text-white flex flex-col flex-start h-full">

        <div className="flex items-center justify-between mb-3">

          <h3 className="text-base font-semibold opacity-90">Live Caption</h3>

          <div className="flex items-center space-x-2">

            <div className={`w-2 h-2 rounded-full ${color}`} />

            <span className="text-sm opacity-70">{label}</span>

          </div>

        </div>



        <div className="min-h-[4rem] flex flex-col">

          {content ? (

            <div className={`text-sm opacity-85 leading-relaxed flex-1 ${error ? "text-red-300" : ""}`}>

              <span>{content || PROMPTS.fallbackCaption}</span>

            </div>

          ) : (

            <div className="flex items-center justify-center w-full space-x-2">

              <div className="animate-spin rounded-full h-4 w-4 border border-blue-400 border-t-transparent" />

              <p className="text-sm opacity-80 italic">{PROMPTS.processingMessage}</p>

            </div>

          )}

        </div>

      </div>

    </GlassContainer>
  );
}