<script lang="ts" setup>
//#region --Props--.
defineProps({
  score: {
    type: Number,
    required: true,
    nullable: false,
  },
  nbVote: {
    type: Number,
    required: true,
    nullable: false,
  },
});
//#endregion

//#region --Function--.
/**
 * Format vote count if > 1000.
 * @param count
 */
const formatVoteCount = (count: number) => {
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k votes`;
  }
  return `${count} votes`;
};
//#endregion
</script>

<template>
  <section class="flex items-center mb-6">
    <section class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center font-bold mr-3">
      {{ score.toFixed(1) }}
    </section>
    <section>
      <p class="font-semibold">
        Note TMDB
      </p>
      <div class="text-sm text-gray-400">
        {{ formatVoteCount(nbVote) }}
      </div>
    </section>
  </section>
</template>

<style scoped></style>