// RodapeMinimal: a assinatura. Um fio de 3 px e, embaixo, o nome da marca à esquerda e o endereço à direita em Spline Sans Mono,
// tamanho 36, tinta a 70%. Entra por último, sem movimento grande: só sobe 30 px. Dentro das margens de 120 px.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, MARGEM, MONO, e5, seg} from '../base';

export type RodapeMinimalProps = {
  nome: string;
  url: string;
  inicio?: number;
  /** centro vertical do texto, px */
  y?: number;
  fim?: number;
};

export const RodapeMinimal: React.FC<RodapeMinimalProps> = ({nome, url, inicio = 0, y = 1260, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const p = e5(seg(f, inicio, inicio + 16)), sai = e5(seg(f, fim, fim + 10));
  return <div style={{position: 'absolute', left: MARGEM, width: 840, top: y - 60, opacity: (1 - sai) * p, transform: `translateY(${(1 - p) * 30}px)`}}>
    <div style={{height: 3, width: 840 * p, background: COR.tinta, opacity: 0.4}} />
    <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 28, fontFamily: MONO, fontWeight: 400, fontSize: 36, letterSpacing: '0.06em', color: COR.tinta, opacity: 0.8}}>
      <span>{nome.toUpperCase()}</span><span>{url}</span>
    </div>
  </div>;
};