import React from 'react';
import { useCurrentFrame } from 'remotion';

interface TypewriterTextProps {
  text: string;
  startFrame?: number;
  charsPerFrame?: number;
  showCursor?: boolean;
  style?: React.CSSProperties;
  cursorColor?: string;
}

export const TypewriterText: React.FC<TypewriterTextProps> = ({
  text,
  startFrame = 0,
  charsPerFrame = 0.5,
  showCursor = true,
  style = {},
  cursorColor = '#ff6d5a',
}) => {
  const frame = useCurrentFrame();
  const elapsed = Math.max(0, frame - startFrame);
  const charCount = Math.min(text.length, Math.floor(elapsed * charsPerFrame));
  const displayText = text.slice(0, charCount);
  const cursorOpacity = frame % 30 < 15 ? 1 : 0;

  return (
    <span style={style}>
      {displayText}
      {showCursor && (
        <span
          style={{
            opacity: cursorOpacity,
            color: cursorColor,
            fontWeight: 'bold',
          }}
        >
          |
        </span>
      )}
    </span>
  );
};
