import { type ReactNode } from 'react';

import { type UniqueIdentifier } from '@dnd-kit/core';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

type OverlayContentProps = {
  id: UniqueIdentifier;
  children: ReactNode;
};

/**
 * Wraps overlay content and applies the sortable transform so the overlay
 * moves correctly during drag (same pattern as SortableList's overlay SortableItem).
 * Must be rendered inside SortableContext.
 */
const OverlayContent = ({ id, children }: OverlayContentProps) => {
  const { setNodeRef, transform, transition } = useSortable({
    id,
    disabled: false,
  });

  return (
    <div
      ref={setNodeRef}
      style={{
        cursor: 'grabbing',
        opacity: 0.95,
        transform: CSS.Transform.toString(transform),
        transition,
        listStyle: 'none',
      }}
    >
      {children}
    </div>
  );
};

OverlayContent.displayName = 'SortableList.OverlayContent';

export default OverlayContent;
