import { observer } from "mobx-react";
// ui
import { DragHandle } from "@buzzwaretech/ui";
// helper
import { cn } from "@buzzwaretech/utils";

type Props = {
  sort_order: number | null;
  isDragging: boolean;
};

export const WidgetItemDragHandle = observer(function WidgetItemDragHandle(
  props: Props,
) {
  const { isDragging } = props;

  return (
    <div
      className={cn(
        "mr-2 flex cursor-grab items-center justify-center rounded-sm text-placeholder",
        {
          "cursor-grabbing": isDragging,
        },
      )}
    >
      <DragHandle className="bg-transparent" />
    </div>
  );
});