import React from 'react';
import Link from 'next/link';
import { Button } from 'primereact/button';

const Custom404 = () => {
    return (
        <div className="exception-body notfound">
            <img src="/layout/images/logo/logo-white-lions.png" alt="BTP Xpress" className="logo" />

            <div className="exception-content">
                <div className="exception-title">404 - Page non trouvée</div>
                <div className="exception-detail mb-5">
                    La page que vous recherchez n'existe pas ou a été déplacée.
                </div>

                <div className="flex flex-column gap-3 max-w-md mx-auto">
                    <Link href="/dashboard" passHref>
                        <Button
                            label="Aller au tableau de bord"
                            icon="pi pi-home"
                            className="w-full"
                            style={{
                                background: 'var(--primary-color)',
                                border: '1px solid var(--primary-color)'
                            }}
                        />
                    </Link>

                    <Link href="/" passHref>
                        <Button
                            label="Retour à l'accueil"
                            icon="pi pi-arrow-left"
                            className="p-button-outlined w-full"
                            style={{
                                borderColor: 'var(--surface-border)',
                                color: 'var(--text-color)'
                            }}
                        />
                    </Link>
                </div>

                <div className="text-center mt-4">
                    <p className="text-xs text-color-secondary">
                        Code d'erreur : 404
                    </p>
                </div>
            </div>
        </div>
    );
};

export default Custom404;