import React, { type ReactNode } from 'react';
import HmSparkle from '@/shared/components/Sparkle';
import useRandomInterval from '@/shared/hooks/useRandomInterval.hook';
import generateSparkle from '@/shared/utils/generateSparkle';
import '@/shared/components/Sparkles.css';

type Props = {
  children: ReactNode;
};

function Sparkles(props: Props) {
  const { children } = props;

  const [sparkles, setSparkles] = React.useState(() => {
    return Array(3).map(() => generateSparkle());
  });

  useRandomInterval(
    () => {
      const sparkle = generateSparkle();
      const now = Date.now();
      setSparkles([...sparkles.filter((sp) => now - sp.createdAt < 750), sparkle]);
    },
    50,
    450,
  );

  const sparkleItems = sparkles.map((sparkle) => (
    <HmSparkle key={sparkle.id} color={sparkle.color} size={sparkle.size} style={sparkle.style} />
  ));

  return (
    <span className="hm-sparkles-wrapper">
      {sparkleItems}
      <div className="hm-sparkles-children-wrapper">{children}</div>
    </span>
  );
}

export default Sparkles;
