import React from 'react';
import { ConfigProvider } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import Link from 'next/link';
import { comfortaa, inter } from './fonts';
import StyledRegistry from '../lib/StyleRegistry';
import theme from '../constants/theme';
import { BackButton } from '../components/view/BackButton';

export default function NotFound() {
    return (
        <html className={`${comfortaa.variable} ${inter.variable}`}>
            <body>
                <AntdRegistry>
                    <StyledRegistry>
                        <ConfigProvider theme={theme}>
                            <div className="b-wrapper">
                                <div className="b-content">
                                    <header className="b-header">
                                        <div className="b-inner">
                                            <Link href={'/' as any} className="b-header__logo">
                                                <img
                                                    src="/images/logo-header.svg"
                                                    className="img-default"
                                                    alt=""
                                                />
                                            </Link>
                                        </div>
                                    </header>
                                    <div className="page-error">
                                        <div className="b-inner">
                                            <div className="error__image">
                                                <img src="/images/not-found.png" alt="" />
                                            </div>
                                            <div className="error__description">
                                                <div className="error__code">404</div>
                                                <div className="error__subtitle">We can't seem to find a page you're looking for</div>
                                                <BackButton className="btn-apply error__button">
                                                    Go back
                                                </BackButton>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <footer className="b-footer">
                                    <div className="b-inner">
                                        <div className="row">
                                            <div className="col" />
                                        </div>
                                    </div>
                                </footer>
                            </div>
                        </ConfigProvider>
                    </StyledRegistry>
                </AntdRegistry>
            </body>
        </html>
    );
}
