<template>
  <div class="entry-count-widget">
    <cards/>
    <span>{{ entryCount }} {{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</span>
  </div>
</template>

<script>
  import Cards from '@/components/icons/Cards.vue';

  export default {
    props: ['entryCount'],

    components: {
      Cards
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_mixins.scss";

  .entry-count-widget {
    display: flex;
    align-items: center;
    opacity: 0.6;

    svg {
      width: 30px;
      fill: $color-charcoal-dark;
      margin-right: 15px;
    }

    & > span {
      @include room-widget-text-style;
    }
  }

</style>
