import {
  AbsoluteFill,
  Img,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

export const SceneImageWithMarqueeText: React.FC<{
  backgroundImage: string;
  text: string;
  speed?: number;
  fontSize?: number;
}> = ({ backgroundImage, text, speed = 1, fontSize = 60 }) => {
  const frame = useCurrentFrame();
  const { width } = useVideoConfig();
  
  // Calculate text width approximation (adjust multiplier based on font)
  const textWidth = text.length * fontSize * 0.6;
  
  // Total distance to travel (from right edge to left edge)
  const totalDistance = width + textWidth;
  
  // Calculate position based on frame and speed
  const translateX = interpolate(
    frame,
    [0, 120 / speed], // Adjust duration based on speed
    [width, -textWidth],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    }
  );

  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <Img
        src={backgroundImage}
        style={{ width: "100%", height: "100%", objectFit: "cover" }}
      />
      <AbsoluteFill 
        style={{ 
          justifyContent: "center", 
          alignItems: "center",
          overflow: "hidden"
        }}
      >
        <div
          style={{
            position: "absolute",
            whiteSpace: "nowrap",
            transform: `translateX(${translateX}px)`,
          }}
        >
          <h1
            style={{
              color: "white",
              fontSize: `${fontSize}px`,
              textShadow: "3px 3px 6px rgba(0,0,0,0.9)",
              fontWeight: "bold",
              margin: 0,
            }}
          >
            {text}
          </h1>
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};