<script>
  export let context;
  export let topPostsData = [];
</script>

<style lang="scss">
  .top-posts {
    padding-bottom: 20px;
    border-bottom: 2px solid var(--white-variant);
    &--heading {
      padding-bottom: 10px;
      font-size: 1.4em;
      font-weight: 500;
    }
    &--post {
      color: var(--dark);
      &-title {
        padding-bottom: 10px;
        font-size: 0.9em;
        font-weight: 500;
      }
    }
  }
</style>

<div class="top-posts">
  <div class="top-posts--heading">
    TOP 3 {context} POSTS
  </div>
  {#each topPostsData as post}
    <a
      class="top-posts--post"
      href={post.link}
      alt="Link to Blog Post"
      aria-label="Link to Blog Post
    ">
      <div class="top-posts--post-title">{'_'.concat(post.title).toUpperCase()}</div>
    </a>
  {/each}
</div>
