import React from 'react'
import Navbar from '../ComponentUtils/Headers/Navbar'
import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload'
import ErrorAnimation from '../ComponentUtils/ErrorAnimation/ErrorAnimation'
import { getHostConfig } from '../../Utils/hostDetection'

import './Css/ErrorPage.css'
import '../../App.css'

const ERROR_MESSAGES = {
    '403': {
        title: '403 - Zugriff verweigert',
        description: 'Sie haben keine Berechtigung, auf diese Ressource zuzugreifen.'
    },
    '404': {
        title: '404 - Seite nicht gefunden',
        description: 'Die angeforderte Seite existiert nicht.'
    },
    '500': {
        title: '500 - Interner Serverfehler',
        description: 'Es ist ein interner Serverfehler aufgetreten.'
    },
    '502': {
        title: '502 - Bad Gateway',
        description: 'Der Server hat eine ungültige Antwort erhalten.'
    },
    '503': {
        title: '503 - Service nicht verfügbar',
        description: 'Der Service ist vorübergehend nicht verfügbar.'
    }
};

function ErrorPage({ errorCode = '404' }) {
    const hostConfig = getHostConfig();
    const error = ERROR_MESSAGES[errorCode] || ERROR_MESSAGES['404'];

    return (
        <div className="allContainerNoBackground">
            {hostConfig.isPublic ? <NavbarUpload /> : <Navbar />}
               
            <div className="containerError">
                <div style={{ textAlign: 'center' }}>
                    <h1 style={{ textAlign: 'center' }}>{error.title}</h1>
                    <p>{error.description}</p>
                    <ErrorAnimation errorCode={errorCode} />
                    <a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>
                        Zurück zur Startseite
                    </a>
                </div>
            </div>
        </div>
    )
}


export default ErrorPage