import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

interface SortableBlankProps {
  id: string;
  isPlaceholder?: boolean;
  children: React.ReactNode;
}

const SortableBlank: React.FC<SortableBlankProps> = ({ id, isPlaceholder, children }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style: React.CSSProperties = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : undefined,
    cursor: isPlaceholder ? 'move' : 'default',
  };

  const draggableProps = isPlaceholder ? { ...attributes, ...listeners } : {};

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...draggableProps}
    >
      {children}
    </div>
  );
};

export default SortableBlank;
