/**
 * ElementEditorHeader Component
 *
 * Draggable header for the element editor panel.
 * Includes title, collapse toggle, and remove button.
 */

import React from 'react';

interface ElementEditorHeaderProps {
  title: string;
  isCollapsed: boolean;
  showRemoveButton: boolean;
  onToggleCollapse: () => void;
  onRemove: () => void;
  onDragStart: (event: React.MouseEvent) => void;
}

const ElementEditorHeader: React.FC<ElementEditorHeaderProps> = ({
  title,
  isCollapsed,
  showRemoveButton,
  onToggleCollapse,
  onRemove,
  onDragStart,
}) => {
  return (
    <div
      className='mb-3 flex items-center justify-between gap-2 cursor-move'
      onMouseDown={onDragStart}
    >
      <p className='text-xs font-bold uppercase tracking-wide text-gray-700'>
        {title}
      </p>
      <div className='flex items-center gap-2'>
        <button
          type='button'
          className='text-xs text-gray-700 hover:underline'
          onClick={onToggleCollapse}
        >
          {isCollapsed ? 'Expand' : 'Collapse'}
        </button>
        {showRemoveButton && (
          <button
            type='button'
            className='text-xs text-red-600 hover:underline'
            onClick={onRemove}
          >
            Remove element
          </button>
        )}
      </div>
    </div>
  );
};

export default ElementEditorHeader;