<script setup>

const props = defineProps({
  rating: { type: Number, required: true }, // 0..5
  name: { type: String, required: true },
  image: { type: String, required: true },
  time: { type: String, required: true },
  text: {
    type: String,
    required: true,
  },
});


</script>

<template>
  <article
    class="group  rounded-iq-roundness  p-5 transition font-iq-paragraph leading-iq-paragraph tracking-iq-paragraph text-iq-paragraph-color "
  >


    <!-- header -->
    <header class="flex items-center gap-3">
      <!-- avatar (initials, no images, because we're being minimal) -->
      <img
        :src="image"
        :alt="`Image of ${name}`"
        class="grid h-12 w-12 rounded-full object-cover"
      />

      <div class="min-w-0">
        <p class="truncate text-sm font-medium">
          {{ name }}
        </p>
        <p class="text-xs  ">{{ time }}</p>
      </div>
    </header>

    <!-- rating -->
    <div class="mt-3 flex items-center gap-2" aria-label="Review rating" role="img">
      <div class="relative inline-block">
        <!-- empty stars -->
        <div class="flex">

          <Icon name="material-symbols:star-rate-rounded" v-for="i in rating"
              :key="'full-' + i"
              style="color: #FBBF24;"
                />

           
          <Icon name="material-symbols:star-rate-rounded" v-for="i in 5 - rating"
              :key="'empty-' + i" style="color: #D1D5DB;" />

         
        </div>

     
      </div>

      <span class="text-xs font-semibold  ">
        {{ rating }} / 5
      </span>
    </div>

    <!-- body -->
    <p
      class="mt-3 whitespace-pre-line  truncate "
    >
      {{ text }}
    </p>
  </article>
</template>