import React from 'react';
import { useCurrentFrame, spring, useVideoConfig } from 'remotion';

interface FadeSlideInProps {
  children: React.ReactNode;
  startFrame?: number;
  direction?: 'up' | 'down' | 'left' | 'right';
  distance?: number;
  style?: React.CSSProperties;
}

export const FadeSlideIn: React.FC<FadeSlideInProps> = ({
  children,
  startFrame = 0,
  direction = 'up',
  distance = 40,
  style = {},
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - startFrame,
    fps,
    config: { damping: 200 },
  });

  const translateMap = {
    up: `translateY(${(1 - progress) * distance}px)`,
    down: `translateY(${(1 - progress) * -distance}px)`,
    left: `translateX(${(1 - progress) * distance}px)`,
    right: `translateX(${(1 - progress) * -distance}px)`,
  };

  return (
    <div
      style={{
        opacity: progress,
        transform: translateMap[direction],
        ...style,
      }}
    >
      {children}
    </div>
  );
};
