// BarraStatus: a linha de status em vídeo inverso no pé do vidro (como os programas de DOS/BBS):
// segmentos separados por "|" e um relógio que conta o tempo do vídeo. Fica em todas as cenas.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {BLOOM, COR, FONTE, VIDRO} from '../base';

export type BarraStatusProps = {segmentos: string[]; desde?: number};

export const BarraStatus: React.FC<BarraStatusProps> = ({segmentos, desde = 10}) => {
  const f = useCurrentFrame();
  if (f < desde) return null;
  const s = Math.floor(f / 30), q = f % 30;
  const relogio = `00:0${s}:${String(q).padStart(2, '0')}`;
  return <div style={{position: 'absolute', left: 30, right: 30, top: VIDRO.a - 104, height: 54, background: COR.fosforo, color: COR.vidro, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 22px', fontFamily: FONTE, fontSize: 40, boxShadow: BLOOM(COR.fosforo, 0.5), whiteSpace: 'pre'}}>
    <span>{segmentos.join(' | ')}</span><span>{relogio}</span>
  </div>;
};