<script setup lang="ts">
import log from "loglevel";

const props = defineProps<{
  count: number;
  smiley: string;
  cypressIdentifier?: string;
}>();

log.info("Rendering SmileyCell:", props.cypressIdentifier);
</script>

<template>
  <template v-if="count > 0">
    <div class="flex items-center justify-center">
      <component :is="smiley" class="mr-1 inline-block h-6 w-6"></component>
      <p class="inline-block w-6" :data-cy="cypressIdentifier">
        {{ count }}
      </p>
    </div>
  </template>
</template>

<style scoped></style>
