import React, { ReactNode } from 'react';
import { Container, HeroPortal } from '@nova-hf/ui';
import { MultiSelectBannerProps } from '@nova-hf/ui/umd/ts/src/banners/multiselect-banner/MultiSelectBanner';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Layout from 'beta/components/layouts/Layout';
import SideMenuContainer from 'beta/containers/layout/SideMenuContainer';

type SideMenuLayoutProps = {
  children: ReactNode;
  color?: MainColorType;
  title?: string;
  heroChildren?: ReactNode;
  hasMultiSelectBanner?: boolean;
  multiSelectBannerProps?: MultiSelectBannerProps;
};
export const SideMenuLayout = ({
  children,
  color,
  title,
  heroChildren,
  hasMultiSelectBanner,
  multiSelectBannerProps,
}: SideMenuLayoutProps) => {
  return (
    <Layout
      multiSelectBannerProps={multiSelectBannerProps}
      hasMultiSelectBanner={hasMultiSelectBanner}
      hideFooter={!!hasMultiSelectBanner}
      hasSideMenu
    >
      <HeroPortal color={color} title={title}>
        {heroChildren}
      </HeroPortal>
      <SideMenuContainer />
      <Container paddingY={8}>{children}</Container>
    </Layout>
  );
};

export default SideMenuLayout;