import React from 'react';
import { usePermissions } from '../../hooks/usePermissions';
import type { Permission, UserRole } from '../../types/auth';

interface CanProps {
    permission?: Permission | Permission[];
    role?: UserRole | UserRole[];
    fallback?: React.ReactNode;
    children: React.ReactNode;
}

export const Can = ({
    permission,
    role,
    fallback = null,
    children,
}: CanProps): React.ReactElement => {
    const { can, hasRole } = usePermissions();
    const allowed = (!permission || can(permission)) && (!role || hasRole(role));

    return <>{allowed ? children : fallback}</>;
};