import { MdControlCamera } from 'react-icons/md';

import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar';
import { Flex, Link, Text } from '@/ui';

export const Error404 = () => {
  return (
    <>
      <TopBar />
      <PageLayoutInfoCenter padding="25px" width="75%">
        <Flex align="center">
          <MdControlCamera size="250px" color="red.600" />
        </Flex>
        <Flex style={{ textAlign: "center" }}>
          <Text fontSize="px">Erreur 404</Text>
          <Text color="red.600">
            Cette page n'existe plus ou l'URL a changé.
          </Text>
          <Link href="/">
            Retour à l'accueil
          </Link>
        </Flex>
      </PageLayoutInfoCenter>
    </>
  );
};