Recent posts loop inside shortcode function

Hello,

I’m trying to create a custom recent posts shortcode in a custom theme , but I don’t know how to add the loop inside the shortcode function.

please help.

///////////////////////////////
// Recent Posts Shortcode
//////////////////////////////

add_shortcode( 'recent_posts', 'recent_posts' );

function recent_posts() {
  $atts = array(
		'cat' => '',
		'posts' => ''
	);

	$recent_post_query = new WP_Query($atts);

  if ( $demo_posts->have_posts() ) { while( $demo_posts->have_posts() ) { $demo_posts->the_post();

			$output .= 

  $recent_post_query = new WP_Query( 'category_name='.$atts['cat'].'&posts_per_page='.$atts['posts'].'.' );

'<div class="content_box">
    <div class="showcase_post">
      <div class="post_thumb"> <a href="'. the_permalink(); ?>.'">
 <?php

	$no_image = '<img src="'.get_bloginfo('template_directory').'/images/blank.gif">' ;
	// Youtube
	$youtube_url = get_post_meta($post->ID, '_youtube_url', true);
	$youtube_thumb = '<iframe class="video_thumb" src="https://www.youtube.com/embed/'.$youtube_url.'?rel=0&modestbranding=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>';

	// Vimeo
	$vimeo_url = get_post_meta($post->ID, '_vimeo_url', true);
	$vimeo = '<iframe src="//player.vimeo.com/video/'.$vimeo_url.'?title=0&byline=0&portrait=0" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

    if     ( ( has_post_thumbnail()) and empty($vimeo_url) and empty($youtube_url)) {
		echo the_post_thumbnail('large') ;
		} 

	elseif ( !( has_post_thumbnail()) and !empty($youtube_url) and empty($vimeo_url)) {
		echo $youtube_thumb ;
		}

	elseif ( !( has_post_thumbnail()) and empty($youtube_url) and !empty($vimeo_url)) {
		echo $vimeo ;
		}

	// Order

	elseif ( ( has_post_thumbnail()) and !empty($youtube_url) and !empty($vimeo_url)) {
		echo $youtube_thumb ;
		}

	elseif ( ( has_post_thumbnail()) and !empty($youtube_url) and empty($vimeo_url)) {
		echo $youtube_thumb ;
		}

	elseif ( ( has_post_thumbnail()) and empty($youtube_url) and !empty($vimeo_url)) {
		echo $vimeo ;
		}

	elseif ( !( has_post_thumbnail()) and !empty($youtube_url) and !empty($vimeo_url)) {
		echo $youtube_thumb ;
		}

	elseif ( !( has_post_thumbnail()) and empty($youtube_url) and empty($vimeo_url)) {
		echo $no_image ;
		}

?>
</a>
</div>
<!-- End Post Thumb -->

<div class="post_box">
  <div class="post_info"> <a href="<?php the_permalink(); ?>">
    <h3><?php echo substr(the_title('', '', FALSE), 0, 25); ?>..</h3>
    </a>
    </h3>
    <ul>
      <li>
        <p><i class="fa fa-folder-open"></i>
          <?php the_category(); ?>
        </p>
      </li>
      <li>
        <p>
      <li><i class="fa fa-calendar"></i>
        <?php the_date();?>
        </p>
      </li>
      <li>
        <p><i class="fa fa-user"></i>
        <p>by:
          <?php the_author_posts_link(); ?>
          ></p>
        </p>
      </li>
      <li>
        <p><i class="fa fa-comment"></i>
          <?php comments_number( 'no comments', 'one comment', '% comments' ); ?>
          .</p>
      </li>
    </ul>
  </div>
  <!-- End post info -->

  <div class="the_excerpt_post">
    <p>
      <?php the_excerpt(); ?>
    </p>
  </div>
  <!-- End The Excerpt Post --> 

</div>
<!-- End The Excerpt -->

</div>
<!-- End Post Box -->

</div>
<!-- End Content Box  -->'

<?php endwhile;
 wp_reset_postdata();
 else :
<p>'. _e( 'Sorry, no posts matched your criteria.' ) .'</p>
 endif;  

    ;}

  }

	return $output;
}