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

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

//#region --Watch--.
watch(
  () => props.comments,
  (comments) => {
    nextTick(() => {
      if (comments.length) {
        comments.forEach((comment, index) => {
          const element = document.getElementById(`message${index}`) as HTMLParagraphElement;
          element.innerHTML = comment.message;
        });
      }
    });
  }, { immediate: true }
);
//#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 :id="`message${index}`" 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>