import { Avatar, Button, Col, Container, Row, SafeScreen, ScreenHeader, Text } from 'components';
import NotFoundImage from 'assets/icons/not-found.png';
import { useEffect } from 'react';
import { isHideSideBarVar } from 'state-management/settings';
import { ArrowLeft } from 'icons';
export const NotFound = () => {
  useEffect(() => {
    isHideSideBarVar(true);
  }, []);
  return (
    <SafeScreen>
      <ScreenHeader />
      <Container px={'3xl'} flex={1}>
        <Row alignItems="center" justifyContent="space-between" flex={1}>
          <Col>
            <Text fontSize={60} variant="title">
              Something’s {'\n'}missing.
            </Text>
            <Text mt="l" variant="title" color="body" weightVariant="normal">
              The internet is a mysterious and powerful place,{'\n'}and it's mystery is only
              exceeded by it's power.
            </Text>

            <Button
              mt="xl"
              colorVariant="primary"
              sizeVariant="large"
              title={'Go Back'}
              width={220}
              leftElement={<ArrowLeft width={17} height={15} colorVariant="white" />}
              onPress={() => {}}
            />
          </Col>
          <Col>
            <Avatar size={450} shapeVariant="square" asset={NotFoundImage} />
          </Col>
        </Row>
      </Container>
    </SafeScreen>
  );
};