// Fundo: cinza-azulado claro com grade isométrica (linhas a ±30°) que anda devagar e uma luz suave no alto.
// Fica FORA da Camera.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {cor?: string; linha?: string; velocidade?: number};

export const Fundo: React.FC<FundoProps> = ({cor = COR.chao, linha = COR.linha, velocidade = 1}) => {
  const f = useCurrentFrame() * velocidade;
  return <AbsoluteFill style={{background: cor}}>
    <AbsoluteFill style={{backgroundImage: `repeating-linear-gradient(30deg, ${linha} 0 2px, transparent 2px 120px), repeating-linear-gradient(-30deg, ${linha} 0 2px, transparent 2px 120px)`, backgroundPosition: `${f * 0.25}px ${f * 0.15}px`, opacity: 0.8}} />
    <AbsoluteFill style={{background: 'radial-gradient(60% 34% at 50% 22%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(70% 22% at 50% 82%, rgba(27,29,34,0.08), transparent 70%)'}} />
  </AbsoluteFill>;
};