<DragDropContext onDragEnd={onDragEnd}>
              <Droppable droppableId="droppable">
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    className="grid grid-cols-2 gap-3 p-3 overflow-auto"
                    style={{
                      height: "calc(100vh - 200px)",
                      minHeight: "300px",
                      maxHeight: "calc(100vh - 200px)",
                    }}
                  >

      {flashcards?.map((card, index) => (
                      <Draggable
                        key={card.id}
                        index={index}
                        draggableId={card.id.toString()}
                      >
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            className={`transition-transform ${
                              snapshot.isDragging ? "shadow-lg" : ""
                            }`}
                            style={{
                              ...provided.draggableProps.style,
                              minHeight: "150px",
                              minWidth: "150px",
                            }}
                          >
                            <SingleCard
                              key={card.id}
                              data={card}
                              isActive={card?.id === activeFlashcardId}
                              isDragging={snapshot.isDragging}
                              setActiveFlashcardId={setActiveFlashcardId}
                            />
                          </div>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </DragDropContext>
          </div>