import React from "react";
import PanelNav from "./PanelNav";
import styles from "../styles/panel_block.less";

class PanelBlock extends React.Component {
  render() {
    const { title, flexDirection, height, children } = this.props;

    const style = {
      height: height || undefined,
      flex: height ? "unset" : 1,
      flexDirection: flexDirection ?? 'column'
    };

    return (
      <div className={`${styles.panel} ${styles.block}`} style={style}>
        {title && <PanelNav title={title} />}
        {children}
      </div>
    );
  }
}

export default PanelBlock;
