import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { DragHandleIcon } from "../../assets/svg";

const SortableItem = ({
  id,
  children,
}: {
  id: string;
  children: React.ReactNode;
}) => {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });

  return (
    <div
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
        display: "flex",
        alignItems: "center",
        gap: 8,
      }}
    >
      <span {...attributes} {...listeners} style={{ cursor: "grab" }}>
        <DragHandleIcon />
      </span>
      <div style={{ flexGrow: 1 }}>{children}</div>
    </div>
  );
};

export default SortableItem;