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>
  );
}