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

interface DrawLineProps {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  startFrame?: number;
  duration?: number;
  color?: string;
  strokeWidth?: number;
}

export const DrawLine: React.FC<DrawLineProps> = ({
  x1,
  y1,
  x2,
  y2,
  startFrame = 0,
  duration = 30,
  color = '#ff6d5a',
  strokeWidth = 2,
}) => {
  const frame = useCurrentFrame();
  const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  const progress = interpolate(frame - startFrame, [0, duration], [length, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <line
      x1={x1}
      y1={y1}
      x2={x2}
      y2={y2}
      stroke={color}
      strokeWidth={strokeWidth}
      strokeDasharray={length}
      strokeDashoffset={progress}
      strokeLinecap="round"
    />
  );
};
