import { Draggable, Droppable } from "@hello-pangea/dnd";
import Task from "./Task";

export default function Column({
  column,
  index,
}: {
  column: {
    id: string;
    title: string;
    tasks: {
      id: string;
      content: string;
    }[];
  };
  index: number;
}) {
  return (
    <Draggable draggableId={column.id} index={index}>
      {(provided1) => (
        <section
          className="border w-fit p-2"
          // {...provided1.dragHandleProps}
          {...provided1.draggableProps}
          ref={provided1.innerRef}
        >
          <div {...provided1.dragHandleProps}>{column.title}</div>
          <Droppable droppableId={column.id} type="task">
            {(provided) => (
              <div
                className="flex flex-col gap-2 w-50 h-50 overflow-auto"
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {column.tasks.map((task, index) => (
                  <Task key={task.id} task={task} index={index} />
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </section>
      )}
    </Draggable>
  );
}