import React from 'react';

import styles from './LayoutShell.module.css';

type Props = {
  topBar: React.ReactNode;
  left: React.ReactNode;
  center: React.ReactNode;
  right: React.ReactNode;
  /** Блокировка основной области (под хедером), например без лицензии. */
  bodyOverlay?: React.ReactNode;
};

export function LayoutShell({ topBar, left, center, right, bodyOverlay }: Props) {
  return (
    <div className={styles.root}>
      <div className={styles.topBar}>{topBar}</div>
      <div className={styles.body}>
        {bodyOverlay ? <div className={styles.bodyOverlay}>{bodyOverlay}</div> : null}
        <div className={styles.col}>{left}</div>
        <div className={styles.col}>{center}</div>
        <div className={styles.col}>{right}</div>
      </div>
    </div>
  );
}