'use client'

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

export default function GlobalError({
    error,
    reset,
}: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    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/server-error.png" alt="" />
                                            </div>
                                            <div className="error__description">
                                                <div className="error__subtitle">Something wrong</div>
                                                <Button className="btn-apply error__button" onClick={() => reset()}>
                                                    Refresh page
                                                </Button>
                                            </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>
    );
}
