import { useState, useCallback } from 'react';

export interface FloatingItem {
  id: number;
  text: string;
  x: number;
  y: number;
  color: string;
  fontSize?: number;
}

let _seq = 0;

export function useFloatingItems(durationMs = 1200) {
  const [items, setItems] = useState<FloatingItem[]>([]);

  const add = useCallback(
    (partial: Omit<FloatingItem, 'id'>) => {
      const id = _seq++;
      setItems((prev) => [...prev, { id, ...partial }]);
      setTimeout(
        () => setItems((prev) => prev.filter((it) => it.id !== id)),
        durationMs
      );
    },
    [durationMs]
  );

  return { items, add };
}
