import React from 'react';
import { Box, Icon, Icons, Scroll } from 'folds';
import {
  Page,
  PageContent,
  PageContentCenter,
  PageHero,
  PageHeroSection,
} from '../../../components/page';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';

const CreateSpaceForm = React.lazy(() =>
  import('../../../features/create-space').then((m) => ({ default: m.CreateSpaceForm })),
);

export function Create() {
  const { navigateSpace } = useRoomNavigate();

  return (
    <Page>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <PageContentCenter>
              <PageHeroSection>
                <Box direction="Column" gap="700">
                  <PageHero
                    icon={<Icon size="600" src={Icons.Space} />}
                    title="Create Space"
                    subTitle="Build a space for your community."
                  />
                  <React.Suspense fallback={null}>
                    <CreateSpaceForm onCreate={navigateSpace} />
                  </React.Suspense>
                </Box>
              </PageHeroSection>
            </PageContentCenter>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}
