// PlacaVoadora: placa colorida (cantos 36 px, borda preta) com 1–2 linhas. Nasce no ponto de fuga, cresce até 1
// com overshoot, para pra leitura e atravessa a tela em `fim` (escala 6x, desfoque, some).
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {CENTRO_Y, COR, FAM_A, FONTE_A, caber, c01, e5, lerp, ob, seg} from '../base';

export type PlacaVoadoraProps = {
  linhas: string[];
  cor?: string;
  corTexto?: string;
  y?: number;
  tamanho?: number;
  inicio?: number;
  fim?: number;
  /** graus de inclinação final */
  rot?: number;
};

export const PlacaVoadora: React.FC<PlacaVoadoraProps> = ({linhas, cor = COR.mostarda, corTexto = COR.tinta, y = CENTRO_Y, tamanho = 84, inicio = 0, fim, rot = -4}) => {
  const f = useCurrentFrame();
  const p = ob(seg(f, inicio, inicio + 16), 1.7), sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 12));
  if (f < inicio - 1 || sai >= 1) return null;
  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, 620, 700, 0)));
  const h = tam * 1.25 * linhas.length + 150;
  return <div style={{position: 'absolute', left: 540 - 380, top: y - h / 2, width: 760, height: h, borderRadius: 36, background: cor, border: `12px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', transform: `scale(${lerp(0.08, 1, p) * lerp(1, 6, sai)}) rotate(${rot * p}deg)`, transformOrigin: '50% 50%', opacity: c01((f - inicio + 1) / 3) * (1 - sai), filter: sai > 0.02 ? `blur(${sai * 10}px)` : undefined}}>
    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_A, fontWeight: 700, fontSize: tam, lineHeight: 1.25, color: corTexto, whiteSpace: 'nowrap'}}>{l}</div>)}
  </div>;
};