import * as React from 'react';
import * as classNames from 'classnames';

import {ReactNode, SFC} from 'react';
import {MainNavLeft, MainNavLeftProps} from './MainNavLeft';

export interface Props extends MainNavLeftProps {
  elementLeft?: ReactNode;
  elementRight?: ReactNode;
  loading?: boolean;
}

export const MainNav: SFC<Props> = ({
  title,
  breadcrumbs,
  elementLeft,
  elementRight,
  noMenuButton,
  loading,
  onClickMenuButton}: Props) => (

  <nav
    className={classNames(
      'main-nav',
      {loading},
    )}
  >
    <MainNavLeft
      breadcrumbs={breadcrumbs}
      button={elementLeft}
      noMenuButton={noMenuButton}
      title={title}
      onClickMenuButton={onClickMenuButton}
    />

    {elementRight && <div className="main-nav-right">{elementRight}</div>}
  </nav>
);

MainNav.displayName = 'MainNav';

MainNav.defaultProps = {
  elementLeft: null,
  elementRight: null,
  loading: false,
};