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 = ''}) {

  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 ' + styles['app-container'] + ' ' + (showHeaders ? '' : styles['without-headers'])+ ' ' + (showFooter ? '' : styles['without-footer']) + ' ' + className}>
        <div className={styles['app-content'] + " container w-full mx-auto"}>
          {children}
        </div>
        {renderFooters()}
      </div>
    </>
  );
}

export default Layout;