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,
      width,
      children,
      justifyContent,
      marginBottom,
      marginRight,
      styleObj,
      isRotateFade,
    } = this.props;

    const style = {
      width: width || undefined,
      height: height || undefined,
      flex: height ? "unset" : 1,
      flexDirection: flexDirection ?? "column",
      justifyContent: justifyContent ?? "center",
      marginBottom: marginBottom ?? "0",
      marginRight: marginRight ?? "0",
      ...styleObj,
    };

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

export default PanelBlock;
