import React from "react";
import { useDraggable } from "@dnd-kit/core";

export function Draggable(props) {
  const { id } = props;
  const { attributes, listeners, setNodeRef, transform, isDragging } =
    useDraggable({
      id,
    });
  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
        opacity: 0.6,
      }
    : undefined;
  const className = transform ? "z-30 shadow-xl relative w-min " : "z-10 relative w-min";

  return (
    <div className={className} ref={setNodeRef} style={style} {...attributes}>
      <button
        className="btn absolute top-1 right-1 z-20 btn-square btn-soft"
        {...listeners}
        onMouseDown={(e) => e.stopPropagation()} // 阻止事件冒泡
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="size-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M3.75 9h16.5m-16.5 6.75h16.5"
          />
        </svg>
      </button>
      {props.children}
    </div>
  );
}