import React, { useContext } from 'react';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useTranslation } from '../hooks';
import { FloatingPanelContext } from './constants';
import { DraggableArea } from './draggable-area';
import { jsx as _jsx } from "react/jsx-runtime";
export function FloatingPanelDragHandle({
  dragIcon
}) {
  const content = /*#__PURE__*/_jsx(FontAwesomeIcon, {
    icon: dragIcon
  });
  const {
    t
  } = useTranslation();
  const {
    onDrag,
    onDragStart,
    onDragEnd,
    onMoveWithArrows
  } = useContext(FloatingPanelContext);
  return /*#__PURE__*/_jsx(DraggableArea, {
    tabIndex: 0,
    testId: "floating-area-drag-handle",
    areaId: "drag-handle",
    className: "drag-handle",
    onDrag: onDrag,
    onDragStart: onDragStart,
    onDragEnd: onDragEnd,
    onKeyDown: onMoveWithArrows,
    "aria-label": t('Draggable handle: use arrows to change position of the panel'),
    role: "button",
    children: content
  });
}