import { Box, Center, Heading, Link, Text } from '@chakra-ui/react';
import { MdDangerous } from 'react-icons/md';

import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar';

export const Error403 = () => {
  return (
    <>
      <TopBar />
      <PageLayoutInfoCenter padding="25px">
        <Center>
          <MdDangerous
            style={{ width: '250px', height: '250px', color: 'red' }}
          />
        </Center>
        <Box textAlign="center">
          <Heading>Error 403</Heading>
          <Text color="orange.600">This page is forbidden to you.</Text>
          <Link href="/">Back to Homepage</Link>
        </Box>
      </PageLayoutInfoCenter>
    </>
  );
};
