"use client";

import { useOthersMapped } from "@/lib/liveblocks.config";
import { cn } from "@/lib/utils";

/**
 * Displays other users' cursors on the canvas
 */
export function Cursors() {
  const others = useOthersMapped((other) => ({
    cursor: other.presence.cursor,
    name: other.presence.name,
    color: other.presence.color,
  }));

  return (
    <>
      {others.map(([connectionId, { cursor, name, color }]) => {
        if (!cursor) return null;
        
        return (
          <div
            key={connectionId}
            className="pointer-events-none absolute z-50 transition-transform duration-75"
            style={{
              left: cursor.x,
              top: cursor.y,
            }}
          >
            {/* Cursor SVG */}
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              className="drop-shadow-md"
              style={{ color }}
            >
              <path
                d="M5.65376 12.4563L12.8879 5.22215L13.3088 11.6462L18.4165 13.1053L5.65376 12.4563Z"
                fill="currentColor"
              />
              <path
                d="M5.65376 12.4563L12.8879 5.22215L13.3088 11.6462L18.4165 13.1053L5.65376 12.4563Z"
                stroke="white"
                strokeWidth="1.5"
              />
            </svg>
            
            {/* Name label */}
            <div
              className="absolute left-4 top-4 px-2 py-1 rounded-md text-xs font-medium text-white whitespace-nowrap shadow-sm"
              style={{ backgroundColor: color }}
            >
              {name}
            </div>
          </div>
        );
      })}
    </>
  );
}

/**
 * Tracks and broadcasts the current user's cursor position
 */
export function CursorTracker({ containerRef }: { containerRef: React.RefObject<HTMLElement> }) {
  // This would be used with useUpdateMyPresence to track cursor
  // Implemented in the canvas viewer component
  return null;
}