import React, { ReactNode, useEffect } from "react";
import { getClassName } from "../utils";

import "./Panel.css";
function Panel({ children, header, id, ...props }: { [x: string]: any }) {

  return (
    <div
      {...props}
      data-header={!!header}
      id={id}
      className={getClassName("MYUI-Panel", props.className)}>
      <div className="MYUI-Panel__in">
        {header && <div className="MYUI-Panel__header">{header}</div>}
        <div id={id + `_panelchildren`} className="MYUI-Panel__children">{children}</div>
      </div>
    </div>
  );
}

export default Panel;