import React from "react";
import {spring, useCurrentFrame, useVideoConfig} from "remotion";
import {
  VQSpeechSubtitle,
  type VQSpeechSubtitleStyleOptions,
} from "./VQSpeechSubtitle";

export type VQCaptionOverlayProps = Readonly<{
  text?: string;
  speakerName?: string;
  accentColor?: string;
  subtitleOptions?: VQSpeechSubtitleStyleOptions;
  containerStyle?: React.CSSProperties;
}>;

const defaultOverlayStyle: React.CSSProperties = {
  position: "absolute",
  bottom: 40,
  left: 0,
  right: 0,
  display: "flex",
  justifyContent: "center",
};

export const VQCaptionOverlay: React.FC<VQCaptionOverlayProps> = ({
  text,
  speakerName,
  accentColor,
  subtitleOptions,
  containerStyle,
}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const subtitleProgress = spring({
    frame,
    fps,
    config: {damping: 20, mass: 0.7},
  });

  if (!text) {
    return null;
  }

  return (
    <div style={{...defaultOverlayStyle, ...containerStyle}}>
      <VQSpeechSubtitle
        text={text}
        progress={subtitleProgress}
        speakerName={speakerName}
        accentColor={accentColor}
        {...subtitleOptions}
      />
    </div>
  );
};