// PlacaBloco: placa de texto com extrusão sólida (18 sombras de 1 px na cor ×0,62). Desliza de um lado, bate no lugar
// com overshoot e a extrusão afunda 6 px por 3 quadros (o "estalo"). Depois flutua 4 px.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FAM_A, FONTE_A, caber, larguraTexto, ob, seg, tom} from '../base';

export type PlacaBlocoProps = {
  texto: string;
  x?: number;
  y?: number;
  tamanho?: number;
  cor?: string;
  corTexto?: string;
  inicio?: number;
  de?: 'esquerda' | 'direita' | 'cima';
  rot?: number;
};

export const PlacaBloco: React.FC<PlacaBlocoProps> = ({texto, x = 540, y = 700, tamanho = 150, cor = COR.tomate, corTexto, inicio = 0, de = 'esquerda', rot = -3}) => {
  const f = useCurrentFrame() - inicio;
  if (f < -1) return null;
  const tam = caber(texto, tamanho, FAM_A, 760, 400, 0), w = larguraTexto(texto, tam, FAM_A, 400, 0) + tam * 1.1, h = tam * 1.7;
  const p = ob(seg(f, 0, 14), 1.8);
  const dx = de === 'esquerda' ? (1 - p) * -760 : de === 'direita' ? (1 - p) * 760 : 0, dy = de === 'cima' ? (1 - p) * -700 : 0;
  const afunda = f >= 14 && f < 17 ? 6 : 0, prof = 18 - afunda;
  const sombra = Array.from({length: prof}, (_, i) => `${i + 1}px ${i + 1}px 0 ${tom(cor, 0.62)}`).join(', ');
  const escura = cor === COR.sol || cor === COR.osso;
  return <div style={{position: 'absolute', left: x - w / 2 + dx + afunda, top: y - h / 2 + dy + afunda + Math.sin(f / 14) * 4, width: w, height: h, borderRadius: 22, background: cor, boxShadow: sombra, transform: `rotate(${rot * p}deg)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontSize: tam, lineHeight: 1, color: corTexto ?? (escura ? COR.tinta : COR.osso), whiteSpace: 'nowrap', border: '4px solid rgba(255,255,255,0.28)', boxSizing: 'border-box'}}>{texto}</div>;
};