import React from 'react';
import { useCurrentFrame, interpolate, staticFile } from 'remotion';

interface Keyframe {
  frame: number;
  x: number;
  y: number;
  zoom: number;
}

interface CanvasViewportProps {
  imageSrc: string;
  imageWidth: number;
  imageHeight: number;
  keyframes: Keyframe[];
  style?: React.CSSProperties;
}

export const CanvasViewport: React.FC<CanvasViewportProps> = ({
  imageSrc,
  imageWidth,
  imageHeight,
  keyframes,
  style = {},
}) => {
  const frame = useCurrentFrame();
  const frames = keyframes.map((k) => k.frame);
  const xValues = keyframes.map((k) => k.x);
  const yValues = keyframes.map((k) => k.y);
  const zoomValues = keyframes.map((k) => k.zoom);

  const x = interpolate(frame, frames, xValues, {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const y = interpolate(frame, frames, yValues, {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const zoom = interpolate(frame, frames, zoomValues, {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        overflow: 'hidden',
        position: 'relative',
        ...style,
      }}
    >
      <img
        src={staticFile(imageSrc)}
        style={{
          position: 'absolute',
          width: imageWidth,
          height: imageHeight,
          transform: `translate(${-x}px, ${-y}px) scale(${zoom})`,
          transformOrigin: '0 0',
        }}
      />
    </div>
  );
};
