// ChuvaDeSprites: chuva de itens de 8 bits (moedas, estrelas, corações) caindo e balançando por toda a tela, atrás do texto.
import React from 'react';
import {ALTURA, ruido, useF} from '../base';
import {Sprite} from '../formas/Sprite';

export type ChuvaDeSpritesProps = {nomes?: string[]; quantidade?: number; inicio?: number; escala?: number; velocidade?: number};
export const ChuvaDeSprites: React.FC<ChuvaDeSpritesProps> = ({nomes = ['moeda', 'estrela', 'coracao'], quantidade = 16, inicio = 0, escala = 9, velocidade = 1}) => {
  const f = useF() - inicio;
  if (f < 0) return null;
  return <>{Array.from({length: quantidade}).map((_, i) => {
    const x = 70 + ruido(i + 1) * 940, v = (14 + ruido(i + 40) * 14) * velocidade, off = ruido(i + 80) * ALTURA;
    const y = ((f * v + off) % (ALTURA + 400)) - 200;
    return <Sprite key={i} nome={nomes[i % nomes.length]} x={x + Math.sin(f / 9 + i) * 30} y={y} escala={escala + Math.floor(ruido(i + 7) * 5)} movimento="parado" sombra={false} />;
  })}</>;
};