import { css, keyframes } from '@emotion/react';
import type { FloatingItem } from '../hooks/useFloatingItems';

const floatUp = keyframes`
  0%   { transform: translateY(0) scale(1);       opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-70px) scale(0.8); opacity: 0; }
`;

export function FloatingOverlay({ items }: { items: FloatingItem[] }) {
  return (
    <>
      {items.map((item) => (
        <span
          key={item.id}
          css={css`
            position: fixed;
            left: ${item.x}px;
            top: ${item.y}px;
            color: ${item.color};
            font-size: ${item.fontSize ?? 13}px;
            font-weight: 700;
            pointer-events: none;
            z-index: 500;
            animation: ${floatUp} 1.2s ease-out forwards;
            white-space: nowrap;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
          `}
        >
          {item.text}
        </span>
      ))}
    </>
  );
}
