// Fundo: verde-floresta com raios de sol (sunburst) saindo de baixo, girando devagar numa tonalidade um pouco mais clara.
// Fica FORA da Camera; quem se mexe é o que está em cima.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** cor do chão */
  cor?: string;
  /** cor dos raios */
  raios?: string;
  /** velocidade do giro (1 = a do preview) */
  velocidade?: number;
};

export const Fundo: React.FC<FundoProps> = ({cor = COR.floresta, raios = COR.florestaClara, velocidade = 1}) => {
  const f = useCurrentFrame() * velocidade;
  const n = 14, fatia = 360 / n;
  return <AbsoluteFill style={{background: cor}}>
    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
      <g transform={`translate(540 1500) rotate(${f * 0.22})`}>
        {Array.from({length: n}, (_, i) => {
          const a0 = (i * fatia * Math.PI) / 180, a1 = ((i * fatia + fatia / 2) * Math.PI) / 180, R = 2600;
          return <path key={i} d={`M0 0 L${Math.cos(a0) * R} ${Math.sin(a0) * R} L${Math.cos(a1) * R} ${Math.sin(a1) * R} Z`} fill={raios} />;
        })}
      </g>
    </svg>
    <AbsoluteFill style={{background: `radial-gradient(70% 36% at 50% 82%, rgba(232,255,90,0.16), transparent 70%), linear-gradient(180deg, rgba(12,59,44,0.55), transparent 40%)`}} />
  </AbsoluteFill>;
};