import React from "react";
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
import { CaptionSegment } from "../../schemas/manifest.js";
import { COLIBRI } from "./tokens.js";

export const CaptionsOverlay: React.FC<{ captions: CaptionSegment[] }> = ({
  captions,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const currentTime = frame / fps;

  const active = captions.find(
    (caption) =>
      currentTime >= caption.start_seconds &&
      currentTime <= caption.end_seconds,
  );

  if (!active) {
    return null;
  }

  return (
    <AbsoluteFill
      style={{
        justifyContent: "flex-end",
        alignItems: "center",
        padding: "0 80px 72px",
        pointerEvents: "none",
      }}
    >
      <div
        style={{
          background: "rgba(8, 6, 26, 0.78)",
          border: "1px solid rgba(255,255,255,0.12)",
          borderRadius: 10,
          padding: "14px 24px",
          maxWidth: 1200,
          textAlign: "center",
          color: COLIBRI.text1,
          fontFamily: COLIBRI.fontBody,
          fontSize: 28,
          lineHeight: 1.35,
          boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
        }}
      >
        {active.text}
      </div>
    </AbsoluteFill>
  );
};