frontend/src/components/floating-notes.tsx

"use client";

import { useEffect, useState } from "react";
import { Music2 } from "lucide-react";

interface Note {
  id: number;
  x: number;
  delay: number;
  duration: number;
}

export function FloatingNotes() {
  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    const generateNotes = () => {
      const newNotes: Note[] = [];
      for (let i = 0; i < 5; i++) {
        newNotes.push({
          id: i,
          x: Math.random() * 100,
          delay: Math.random() * 5,
          duration: 8 + Math.random() * 4,
        });
      }
      setNotes(newNotes);
    };

    generateNotes();
  }, []);

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden opacity-20">

      {notes.map((note) => (

        <div

          key={note.id}

          className="absolute bottom-0 animate-float-up"

          style={{

            left: `${note.x}%`,

            animationDelay: `${note.delay}s`,

            animationDuration: `${note.duration}s`,

          }}

        >

          <Music2 className="h-6 w-6 text-primary" />

        </div>

      ))}

    </div>
  );
}