"use client";
import classnames from "classnames";
import { DndContext } from "@dnd-kit/core";
import { Droppable } from "./Droppable";

export default function DraggablePanel(props: DraggablePanelType) {
  const { draggable, wdith = "full", height = "full", children } = props;

  const draggablePanelClass = classnames(
    `relative h-${height} w-${wdith}`,
    {
      "h-full": height === "full" || height === "100%",
      "w-full": wdith === "full" || wdith === "100%",
      "base-200": draggable, // 当 active 为 true 时添加
      "base-100": !draggable, // 当 disabled 为 true 时添加
    },
  );
  return (
    <DndContext >
      <Droppable>
        <div className={draggablePanelClass}>{children}</div>
      </Droppable>
    </DndContext>
  );
}

export type DraggablePanelType = {
  draggable: boolean;
  wdith?: number | string;
  height?: number | string;
  children: any;
  // grid: boolean;
};