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

interface Props {
  children: React.ReactNode;
  delay?: number;
  direction?: 'up' | 'down' | 'left' | 'right' | 'scale' | 'fade';
  duration?: number;
}

export const Reveal: React.FC<Props> = ({
  children,
  delay = 0,
  direction = 'up',
  duration = 20,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - delay,
    fps,
    config: {
      damping: 18,
      stiffness: 120,
      mass: 0.8,
    },
  });

  const opacity = interpolate(frame - delay, [0, 12], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  let transform = '';
  if (direction === 'up') transform = `translateY(${interpolate(progress, [0, 1], [40, 0])}px)`;
  if (direction === 'down') transform = `translateY(${interpolate(progress, [0, 1], [-40, 0])}px)`;
  if (direction === 'left') transform = `translateX(${interpolate(progress, [0, 1], [60, 0])}px)`;
  if (direction === 'right') transform = `translateX(${interpolate(progress, [0, 1], [-60, 0])}px)`;
  if (direction === 'scale') transform = `scale(${interpolate(progress, [0, 1], [0.85, 1])})`;
  if (direction === 'fade') transform = '';

  return (
    <div style={{ opacity, transform }}>
      {children}
    </div>
  );
};
