import { Layout } from 'antd'
import Loading from 'components/Loading'
import React, { ReactNode, Suspense } from 'react'
import { KomiLogo } from '@komi-app/components'

import './EmptyWithLogoLayout.scss'

const { Content } = Layout

interface IProps {
  children: ReactNode
}

const EmptyWithLogoLayout = ({ children }: IProps) => {
  return (
    <Layout className="empty-with-logo-layout">
      <Suspense fallback={<Loading />}>
        <Content>
          <div className="empty-with-logo-layout-container">
            <KomiLogo width={117} height={24} color="green-yellow" />
            {children}
          </div>
        </Content>
      </Suspense>
    </Layout>
  )
}

export default EmptyWithLogoLayout
