// PassoChamada: a legenda do passo, na TELA (não na janela). Cartão branco de 28 px de raio com sombra,
// o número do passo num círculo laranja de 84 px e o texto em 46 px. Sobe 60 px com mola e sai descendo.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, MONO, entradaSaida} from '../base';

export type PassoChamadaProps = {numero: number; total?: number; texto: string; y?: number; inicio: number; fim: number};

export const PassoChamada: React.FC<PassoChamadaProps> = ({numero, total = 3, texto, y = 1180, inicio, fim}) => {
  const f = useCurrentFrame();
  const {t, op} = entradaSaida(f, inicio, fim);
  if (op <= 0) return null;
  return <div style={{position: 'absolute', left: 0, right: 0, top: y, display: 'flex', justifyContent: 'center', opacity: op, transform: `translateY(${(1 - t) * 60}px)`}}>
    <div style={{display: 'flex', alignItems: 'center', gap: 26, padding: '22px 40px 22px 22px', borderRadius: 28, background: COR.tela, boxShadow: '0 24px 60px rgba(20,22,26,.22), 0 0 0 1px rgba(20,22,26,.06)'}}>
      <div style={{width: 84, height: 84, borderRadius: 42, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 800, fontSize: 46, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${0.6 + 0.4 * t})`}}>{numero}</div>
      <div>
        <div style={{fontFamily: MONO, fontSize: 22, color: COR.apagado, letterSpacing: '0.08em'}}>PASSO {numero} DE {total}</div>
        <div style={{fontFamily: FONTE, fontWeight: 800, fontSize: 46, color: COR.tinta, letterSpacing: '-0.01em', whiteSpace: 'nowrap'}}>{texto}</div>
      </div>
    </div>
  </div>;
};