"use client";

import React from 'react';

interface PanelResizerProps {
  isDragging: boolean;
  onDragStart: () => void;
  onDragEnd: () => void;
  onDrag: (e: MouseEvent) => void;
}

export const PanelResizer: React.FC<PanelResizerProps> = ({
  isDragging,
  onDragStart,
  onDragEnd,
  onDrag
}) => {
  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();
    onDragStart();
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', onDragEnd);
  };

  return (
    <div
      className={`w-1 bg-border cursor-col-resize hover:bg-info transition-colors ${
        isDragging ? 'bg-info' : ''
      }`}
      onMouseDown={handleMouseDown}
    />
  );
};