import React, { FC } from 'react';
import {
  Flex,
  Heading,
  Text,
  Box,
  Button,
  Tooltip,
} from '@polymathnetwork/polymesh-ui';
import { hardRedirect } from '../../utils/hardRedirect';

export const DefaultPage: FC<{
  appName: string;
  mainPath: string;
  body: string;
}> = ({ appName, mainPath, body }) => {
  const connect = () => {
    hardRedirect(mainPath);
  };

  return (
    <Flex alignItems="flex-start" flexDirection="column" p="4">
      <Heading variant="h4" color="brandMain" mb="l">
        {appName}
      </Heading>
      <Text variant="b2m" color="gray.1">
        {body}
      </Text>
      <Box mt="l">
        <Tooltip content={mainPath}>
          <Button onClick={connect}>Go to main path</Button>
        </Tooltip>
      </Box>
    </Flex>
  );
};
