import Header from "../header/header";
import Footer from "../footer/footer";

import styles from './layout.module.scss';

export function Layout({
                         showHeaders = true,
                         showFooter = true,
                         menuHeader = [],
                         menuFooter = [],
                         children = null,
                         className = '',
                         headerTransparent = false
                       }) {

  const renderHeaders = () => {
    if (showHeaders) {
      return (<Header items={menuHeader}/>)
    } else {
      return ('');
    }
  }
  const renderFooters = () => {
    if (showFooter) {
      return (<Footer items={menuFooter}/>)
    } else {
      return ('');
    }
  }

  return (
    <>
      {renderHeaders()}
      <div
        className={'dark:bg-gray-900 bg-gray-50 ' + styles['app-container'] + ' ' + (showHeaders ? '' : styles['without-headers']) + ' ' + (showFooter ? '' : styles['without-footer']) + ' ' + className}>
        <div className={styles['app-content'] + " w-full mx-auto"}>
          {children}
        </div>
        {renderFooters()}
      </div>
    </>
  );
}

export default Layout;
