// LinhasDeVelocidade: 44 riscos que saem do centro nos cortes (10 quadros). Cada um tem comprimento e
// distância próprios (120 a 700 px) e some no fim do trajeto.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {ALTURA, CENTRO_Y, COR, LARGURA, e5, rnd, seg} from '../base';

export type LinhasDeVelocidadeProps = {
  inicio?: number;
  duracao?: number;
  cor?: string;
  quantidade?: number;
};

export const LinhasDeVelocidade: React.FC<LinhasDeVelocidadeProps> = ({inicio = 0, duracao = 10, cor = COR.tinta, quantidade = 44}) => {
  const f = useCurrentFrame();
  const p = seg(f, inicio, inicio + duracao);
  if (p <= 0 || p >= 1) return null;
  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
    {Array.from({length: quantidade}, (_, i) => {
      const a = (i / quantidade) * Math.PI * 2 + rnd(i) * 0.1, c = rnd(i + 20), L = 120 + c * 580;
      const d0 = 460 + e5(p) * 900 * (0.6 + c * 0.6), d1 = d0 + L * (1 - p * 0.5);
      return <line key={i} x1={LARGURA / 2 + Math.cos(a) * d0} y1={CENTRO_Y + Math.sin(a) * d0} x2={LARGURA / 2 + Math.cos(a) * d1} y2={CENTRO_Y + Math.sin(a) * d1} stroke={cor} strokeWidth={6 + c * 10} strokeLinecap="round" opacity={1 - p} />;
    })}
  </svg>;
};