import React from 'react';
import { faThumbtackSlash } from '@fortawesome/free-solid-svg-icons/faThumbtackSlash';
import { faThumbtack } from '@fortawesome/free-solid-svg-icons/faThumbtack';
import { Button, ACCENT_TYPES } from '../button';
import { useTranslation } from '../hooks';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
export function FloatingPanelDockButton({
  isDocked,
  setIsDocked
}) {
  const {
    t
  } = useTranslation();
  const ariaLabel = isDocked ? t('Unlock from sidebar') : t('Dock to sidebar');
  return /*#__PURE__*/_jsx(Button, {
    testId: "floating-panel-dock-button",
    accentType: ACCENT_TYPES.ROUND_ICON,
    onClick: () => setIsDocked(!isDocked),
    "aria-label": ariaLabel,
    tooltipText: ariaLabel,
    tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
    tooltipDelayType: TOOLTIP_DELAY_TYPES.SLOW,
    children: isDocked ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faThumbtackSlash
    }) : /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faThumbtack
    })
  });
}