import { usePermissions } from '../../hooks/usePermissions';

interface RoleBadgeProps {
    className?: string;
    size?: 'sm' | 'md';
}

/**
 * Displays the current user's role as a styled badge
 */
export function RoleBadge({ className = '', size = 'sm' }: RoleBadgeProps) {
    const { roleName, roleColor } = usePermissions();

    const sizeClasses = size === 'sm'
        ? 'text-[10px] px-1.5 py-0.5'
        : 'text-xs px-2 py-1';

    return (
        <span className={`${roleColor} ${sizeClasses} rounded font-medium uppercase tracking-wide ${className}`}>
            {roleName}
        </span>
    );
}
