import React, { ReactNode } from 'react';
import { Box, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import {
  Page,
  PageContent,
  PageContentCenter,
  PageHeader,
  PageHero,
  PageHeroSection,
} from '../../../components/page';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';

type BotStatePageProps = {
  title: ReactNode;
  description: ReactNode;
  icon?: ReactNode;
  children?: ReactNode;
};

export function BotStatePage({ title, description, icon, children }: BotStatePageProps) {
  const screenSize = useScreenSizeContext();

  return (
    <Page>
      {screenSize === ScreenSize.Mobile && (
        <PageHeader balance outlined={false}>
          <Box grow="Yes" alignItems="Center" gap="200">
            <BackRouteHandler>
              {(onBack) => (
                <IconButton onClick={onBack}>
                  <Icon src={Icons.ArrowLeft} />
                </IconButton>
              )}
            </BackRouteHandler>
            <Text size="H4" truncate>
              {title}
            </Text>
          </Box>
        </PageHeader>
      )}
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <PageContentCenter>
              <PageHeroSection>
                <PageHero
                  icon={icon ?? <Icon size="600" src={Icons.Info} />}
                  title={title}
                  subTitle={description}
                >
                  {children && (
                    <Box
                      direction="Column"
                      alignItems="Center"
                      gap="200"
                      style={{ paddingTop: config.space.S200 }}
                    >
                      {children}
                    </Box>
                  )}
                </PageHero>
              </PageHeroSection>
            </PageContentCenter>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}