'use client'

import { useDragLayer } from 'react-dnd'

export function CustomDragLayer() {
  const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
    isDragging: monitor.isDragging(),
    item: monitor.getItem() as { iconId: string; imageUrl?: string } | null,
    currentOffset: monitor.getClientOffset(),
  }))

  if (!isDragging || !currentOffset || !item?.imageUrl) {
    return null
  }

  return (
    <div
      style={{
        position: 'fixed',
        pointerEvents: 'none',
        zIndex: 9999,
        left: 0,
        top: 0,
        transform: `translate(${currentOffset.x - 24}px, ${currentOffset.y - 24}px)`,
      }}
    >
      <div className="w-12 h-12 bg-white/90 rounded-lg shadow-lg border-2 border-primary flex items-center justify-center backdrop-blur-sm">
        <img
          src={item.imageUrl}
          alt=""
          className="w-10 h-10 object-contain"
          crossOrigin="anonymous"
        />
      </div>
    </div>
  )
}
