// CorteImpacto: o soco de um corte. Num quadro `em` ele solta um clarão, treme o conteúdo (decai em ~10 quadros)
// e faz um zoom-pop. Envolve as camadas que devem tremer; ponha um som de batida 1 a 2 quadros antes de `em`.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';

export type CorteImpactoProps = {em: number; forca?: number; clarao?: boolean; corClarao?: string; children?: React.ReactNode};

export const CorteImpacto: React.FC<CorteImpactoProps> = ({em, forca = 1, clarao = true, corClarao = '#ffffff', children}) => {
  const f = useCurrentFrame();
  const d = f >= em ? Math.exp(-(f - em) / 6) * forca : 0;
  const dx = Math.sin((f - em) * 2.9) * 22 * d, dy = Math.cos((f - em) * 3.7) * 16 * d, s = 1 + 0.045 * d;
  return <AbsoluteFill>
    <AbsoluteFill style={{transform: `translate(${dx}px, ${dy}px) scale(${s})`}}>{children}</AbsoluteFill>
    {clarao && d > 0.02 && <AbsoluteFill style={{background: corClarao, opacity: Math.min(0.55, d * 0.6), pointerEvents: 'none'}} />}
  </AbsoluteFill>;
};