import { useDroppable } from '@dnd-kit/core';

interface DroppableContainerProps {
  id: string;
  children: React.ReactNode;
  isEmpty: boolean;
}

export const DroppableContainer = ({ id, children, isEmpty }: DroppableContainerProps) => {
  const { setNodeRef } = useDroppable({
    id,
    data: {
      type: 'container',
      isEmpty
    }
  });
  
  return (
    <div 
      ref={setNodeRef}
      id={id}
      data-droppable="true"
      data-empty={isEmpty ? "true" : "false"}
      className="w-full h-full flex flex-row flex-wrap gap-2"
      style={{ minHeight: '100px' }} // Ensure minimum height for empty containers
    >
      {children}
    </div>
  );
}; 