import React, { ReactNode, Suspense } from "react";
import { Layout } from "antd";

import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";
import When from "@komi-app/when";

import Loading from "components/Loading";
import { KomiLogo } from "@komi-app/components";

import "./OnboardingLayout.scss";

const { Content } = Layout;

interface IProps {
  children: ReactNode;
}

const OnboardingLayout = ({ children }: IProps) => {
  const isUsingNewOnboardingComponents = useFeatureIsOn(
    FLAGS.GS_202_USE_COMPONENT_ONBOARDING_SCREENS
  );
  return (
    <Layout className="onboarding-layout">
      <Suspense fallback={<Loading />}>
        <Content>
          <When
            value={!isUsingNewOnboardingComponents}
            then={
              <div className="navigation-bar">
                <KomiLogo width={117} height={24} color="green-yellow" />
              </div>
            }
          />
          {children}
        </Content>
      </Suspense>
    </Layout>
  );
};

export default OnboardingLayout;
