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

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

<template>
  <section>
    <!-- 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">
          <section>
            <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>
          </section>
          <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
            {{ comment.rating }}
          </section>
        </div>
        <p class="text-gray-300">{{ comment.message }}</p>
      </div>
    </section>
    <!-- Si aucun commentaire -->
    <section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10">
      <MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" />
      <p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p>
    </section>
  </section>
</template>

<style scoped>

</style>