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

<script>
import { defineAsyncComponent } from 'vue';
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon.vue';
const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue'));

export default {
  props: {
    entryCount: {
      type: Number,
    },
    verbose: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: 'cards',
    },
  },

  components: {
    'speech-bubble': SpeechBubbleIcon,
    SpeechBubbleIcon,
    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>
