"use client";
import { ReactElement } from 'react';
import classnames from 'classnames';

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

  const draggablePanelClass = classnames(
  'p-8 grid gap-[16px]', 
  `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 (
    <div className={draggablePanelClass}>
      {
        children
      }
    </div>
  );
}

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