"use client";

import { useEffect, useState } from "react";

interface Heart {
  id: number;
  x: number;
  y: number;
  size: number;
  hue: number;
  delay: number;
  duration: number;
  drift: number;
}

function rand(min: number, max: number) {
  return Math.random() * (max - min) + min;
}

function generate(count: number): Heart[] {
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    x: rand(2, 98),
    y: rand(5, 95),
    size: rand(8, 16),
    hue: rand(340, 360),
    delay: rand(0, 6),
    duration: rand(3.5, 6.5),
    drift: rand(-20, 20),
  }));
}

export function FairyLights({ count = 28 }: { count?: number }) {
  const [hearts, setHearts] = useState<Heart[]>([]);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setHearts(generate(count));
  }, [count]);

  return (
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
    >
      {hearts.map((h) => (
        <span
          key={h.id}
          className="floating-heart"
          style={{
            left: `${h.x}%`,
            top: `${h.y}%`,
            width: `${h.size}px`,
            height: `${h.size}px`,
            background: `radial-gradient(circle at 50% 40%, hsl(${h.hue}, 95%, 65%) 0%, hsl(${h.hue}, 90%, 45%) 45%, transparent 75%)`,
            animationDelay: `${h.delay}s`,
            animationDuration: `${h.duration}s`,
            ["--drift" as string]: `${h.drift}px`,
          }}
        />
      ))}
    </div>
  );
}