// LinhaComando: o prompt e o comando digitados com CADÊNCIA HUMANA (1–3 quadros por tecla, pausa antes
// das opções), cursor de bloco sólido enquanto digita e piscando (8 on / 8 off) parado.
// `enter` = quadro (relativo) em que a linha é confirmada: o cursor some.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {BLOOM, COR, FONTE, GRADE, cadencia, digitados} from '../base';

export type LinhaComandoProps = {
  prompt?: string;
  comando: string;
  y?: number;
  inicio?: number;
  enter?: number;
  tamanho?: number;
  semente?: number;
};

export const LinhaComando: React.FC<LinhaComandoProps> = ({prompt = 'C:\\>', comando, y = 60, inicio = 0, enter, tamanho = 54, semente = 3}) => {
  const f = useCurrentFrame() - inicio;
  if (f < 0) return null;
  const tempos = cadencia(comando, semente);
  const n = digitados(f, tempos);
  const fimDigitar = tempos[tempos.length - 1] ?? 0;
  const confirmado = enter !== undefined && f >= enter;
  const digitando = n < comando.length;
  const cursor = !confirmado && (digitando || Math.floor((f - fimDigitar) / 8) % 2 === 0);
  return <div style={{position: 'absolute', left: GRADE.margem, top: y, fontFamily: FONTE, fontSize: tamanho, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.9), whiteSpace: 'pre'}}>
    <span style={{color: COR.apagado}}>{prompt}</span>{comando.slice(0, n)}
    {cursor && <span style={{display: 'inline-block', width: tamanho * 0.5, height: tamanho * 0.82, background: COR.quente, verticalAlign: '-0.08em', marginLeft: 2, boxShadow: BLOOM(COR.fosforo, 0.8)}} />}
  </div>;
};