/**
 * PaneSplitDropZone - Half-pane drop zones for creating new panes via tab drag.
 * Covers the left or right half of the pane. When a tab is dragged over a half,
 * a semi-transparent accent overlay highlights the target area.
 */

import { useDroppable } from '@dnd-kit/core';

interface PaneSplitDropZoneProps {
  paneId: string;
  side: 'left' | 'right';
  isActive: boolean;
}

export const PaneSplitDropZone = ({
  paneId,
  side,
  isActive,
}: PaneSplitDropZoneProps): React.JSX.Element => {
  const { setNodeRef, isOver } = useDroppable({
    id: `split-${side}-${paneId}`,
    data: {
      type: 'split-zone',
      paneId,
      side,
    },
  });

  return (
    <div
      ref={setNodeRef}
      className="absolute top-0 z-30"
      style={{
        [side]: 0,
        width: '50%',
        height: '100%',
        pointerEvents: isActive ? 'auto' : 'none',
      }}
    >
      {/* Semi-transparent overlay highlight when hovering */}
      {isOver && (
        <div
          className="absolute inset-0"
          style={{
            backgroundColor: 'var(--color-accent, #6366f1)',
            opacity: 0.12,
            borderLeft: side === 'right' ? '2px solid var(--color-accent, #6366f1)' : 'none',
            borderRight: side === 'left' ? '2px solid var(--color-accent, #6366f1)' : 'none',
          }}
        />
      )}
    </div>
  );
};