"use client";

import { FLOATING_EMOJIS } from "~/lib/data";

const POSITIONS = [
  { left: "8%", top: "18%", size: "text-2xl", delay: 0 },
  { left: "85%", top: "12%", size: "text-3xl", delay: 1 },
  { left: "15%", top: "65%", size: "text-xl", delay: 2 },
  { left: "78%", top: "55%", size: "text-2xl", delay: 0.5 },
  { left: "5%", top: "42%", size: "text-lg", delay: 1.5 },
  { left: "92%", top: "38%", size: "text-xl", delay: 2.5 },
  { left: "25%", top: "8%", size: "text-lg", delay: 3 },
  { left: "65%", top: "78%", size: "text-2xl", delay: 1.2 },
  { left: "45%", top: "88%", size: "text-lg", delay: 0.8 },
  { left: "55%", top: "5%", size: "text-xl", delay: 2.2 },
] as const;

export function FloatingEmojis() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      {POSITIONS.map((pos, i) => (
        <span
          key={i}
          className={`absolute select-none opacity-[0.15] ${pos.size}`}
          style={{
            left: pos.left,
            top: pos.top,
            animation: `bounce-gentle ${4 + (i % 3)}s ease-in-out infinite`,
            animationDelay: `${pos.delay}s`,
          }}
        >
          {FLOATING_EMOJIS[i]}
        </span>
      ))}
    </div>
  );
}