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

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

  export default {
    props: {
      entryCount: {
        type: Number,
      },
      verbose: {
        type: Boolean,
        default: true,
      },
    },

    components: {
      Cards,
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .entry-count-widget {
    display: flex;
    align-items: center;
    opacity: 0.6;
    margin-right: $medium-spacing;

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

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

</style>
