Drag Thumbnail

import React, { useState } from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface DragThumbProps {
  icon: string;
  size?: number;
  onDragStart?: () => void;
  onDragEnd?: (position: UDim2) => void;
}

export function DragThumb({ icon, size = 48, onDragStart, onDragEnd }: DragThumbProps) {
  const { colors } = useTheme();
  const [isDragging, setIsDragging] = useState(false);
  const [dragPos, setDragPos] = useState(UDim2.fromScale(0, 0));

  return (
    <frame
      BackgroundColor3={isDragging ? colors.primary : colors.bgTertiary}
      Size={new UDim2(0, size, 0, size)}
      Position={dragPos}
    >
      <uicorner CornerRadius={new UDim(0, 8)} />
      <imagelabel Image={icon} Size={new UDim2(1, -8, 1, -8)} Position={new UDim2(0.5, 0, 0.5, 0)} AnchorPoint={new Vector2(0.5, 0.5)} BackgroundTransparency={1} />
      {isDragging && <uistroke Thickness={2} Color={colors.accent} />}
    </frame>
  );
}