// Overlay: a assinatura que se repete em todo plano: coluna de 3 cores primárias na lateral esquerda e uma régua preta no pé com um
// quadrado vermelho que anda do início ao fim do vídeo (barra de progresso).
import React from 'react';
import {AbsoluteFill, useVideoConfig} from 'remotion';
import {COR, c01, useF} from '../base';

export const Overlay: React.FC = () => {
  const f = useF();
  const {durationInFrames} = useVideoConfig();
  const p = c01(f / durationInFrames);
  return <AbsoluteFill style={{pointerEvents: 'none'}}>
    <div style={{position: 'absolute', left: 0, top: 0, width: 30, height: '34%', background: COR.vermelho}} />
    <div style={{position: 'absolute', left: 0, top: '34%', width: 30, height: '33%', background: COR.amarelo}} />
    <div style={{position: 'absolute', left: 0, top: '67%', width: 30, height: '33%', background: COR.azul}} />
    <div style={{position: 'absolute', left: 60, right: 60, top: 1830, height: 8, background: COR.preto}} />
    <div style={{position: 'absolute', left: 60 + p * 900, top: 1810, width: 48, height: 48, background: COR.vermelho, transform: `rotate(${f * 4}deg)`}} />
  </AbsoluteFill>;
};