// ProtectedRoute.tsx
import React from 'react';
import { useAuth } from './AuthContext';

interface ProtectedRouteProps {
    children: React.ReactNode;
    requiredRole?: 'formateur' | 'rre';
    requiredPermission?: string;
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
    children,
    requiredRole,
    requiredPermission
}) => {
    const { user, hasPermission } = useAuth();

    if (!user) {
        return <div>Accès non autorisé. Veuillez vous connecter.</div>;
    }

    if (requiredRole && user.role !== requiredRole) {
        return (
            <div style={styles.accessDenied}>
                <h2>Accès refusé</h2>
                <p>Vous n'avez pas les permissions nécessaires pour accéder à cette page.</p>
                <p>Rôle requis: {requiredRole}</p>
                <p>Votre rôle: {user.role}</p>
            </div>
        );
    }

    if (requiredPermission && !hasPermission(requiredPermission as any)) {
        return (
            <div style={styles.accessDenied}>
                <h2>Accès refusé</h2>
                <p>Vous n'avez pas la permission requise pour cette action.</p>
            </div>
        );
    }

    return <>{children}</>;
};

const styles = {
    accessDenied: {
        padding: '2rem',
        textAlign: 'center' as const,
        backgroundColor: '#fee2e2',
        borderRadius: '8px',
        margin: '2rem',
    }
};