import { ReactNode } from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { GripVertical } from "lucide-react";

interface DraggableItemProps {
  id: string;
  children: ReactNode;
}

export default function DraggableItem({ id, children }: DraggableItemProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`bg-white border border-gray-200 rounded-lg p-4 mb-3 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow ${
        isDragging ? "cursor-grabbing" : "cursor-grab"
      }`}
    >
      <div
        {...attributes}
        {...listeners}
        className="text-gray-400 hover:text-gray-600 transition-colors"
      >
        <GripVertical size={20} />
      </div>
      <div className="flex-1">{children}</div>
    </div>
  );
}