<script setup lang="ts">
//#region --Import--.
import type { MovieCommentInterface } from "~/interfaces/movieComment";
//#endregion

//#region --Props--.
defineProps({
  comments: {
    type: Array<MovieCommentInterface>,
    required: true,
    nullable: false
  },
});
//#endregion
</script>

<template>
  <!-- Liste des commentaires -->
  <section v-if="comments.length > 0" class="mt-10">
    <h2>Commentaires publiés</h2>
    <div
      v-for="(comment, index) in comments"
      :key="index"
      class="bg-gray-800 rounded-lg p-6 mb-4"
    >
      <div class="flex justify-between items-start mb-2">
        <div>
          <h4 class="font-bold text-lg">Par {{ comment.username }}</h4>
          <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p>
        </div>
        <div class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
          {{ comment.rating }}
        </div>
      </div>
      <p class="text-gray-300">{{ comment.message }}</p>
    </div>
  </section>
</template>

<style scoped>

</style>