import React from 'react'

/**
 * Drop position indicator: the same expanding blue line with the "Drag it here" pill that the canvas draws between
 * top-level fields (the reference builder), so container columns show exactly the same line.
 */
export default function DropLine({ className = '', float = null }) {
  // float 'top' | 'bottom': drawn over the gap above / below its container without moving any field (grid columns),
  // so the before/after midpoint of the hovered field never shifts under the pointer.
  const floatCls = float === 'top' ? 'absolute left-0 right-0 -top-[2px] !my-0' : float === 'bottom' ? 'absolute left-0 right-0 -bottom-[2px] !my-0' : 'relative'
  return (
    <div data-canvas-chrome="true" data-drop-line="true" className={`${floatCls} w-full h-[3px] my-3 overflow-visible z-30 ${className}`}>
      <div
        className="absolute top-0 left-1/2 h-full bg-blue-600 shadow-[0_0_8px_rgba(37,99,235,0.5)] rounded-full"
        style={{
          transform: 'translateX(-50%)',
          width: '0%',
          transition: 'width 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
        }}
        ref={(el) => {
          if (el) {
            requestAnimationFrame(() => {
              requestAnimationFrame(() => {
                el.style.width = '100%'
              })
            })
          }
        }}
      />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-2.5 py-0.5 text-[10px] font-bold rounded-full shadow-md whitespace-nowrap z-30 select-none animate-fadeIn">
        Drag it here
      </div>
    </div>
  )
}