<template>
  <div v-if="!reviews" class="loading-inline">Loading reviews…</div>
  <div v-else-if="!indices?.length" class="empty-inline">No tagged reviews for this item.</div>
  <div v-else>
    <div class="review-grid">
      <article v-for="idx in visible" :key="idx" class="review-card">
        <header class="review-card-head">
          <span class="stars">{{ '★'.repeat(reviews[idx]?.stars || 0) }}<span class="stars-empty">{{ '★'.repeat(5 - (reviews[idx]?.stars || 0)) }}</span></span>
          <span class="review-idx">#{{ idx + 1 }}</span>
        </header>
        <p class="review-body">{{ reviews[idx]?.comment }}</p>
      </article>
    </div>
    <div v-if="indices.length > shown" class="show-more-wrap">
      <button class="show-more" @click.stop="shown += page">
        Show more ({{ indices.length - shown }} remaining)
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  reviews: { type: Array, default: null },
  indices: { type: Array, default: () => [] },
  page: { type: Number, default: 20 }
})

const shown = ref(props.page)
watch(() => props.indices, () => { shown.value = props.page })
const visible = computed(() => (props.indices || []).slice(0, shown.value))
</script>

<style scoped>
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.review-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 10px 12px; }
.review-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.stars { color: #f5a623; font-size: 12px; letter-spacing: 1px; }
.stars-empty { color: #ddd; }
.review-idx { font-size: 10px; color: #999; }
.review-body { font-size: 12px; line-height: 1.45; color: #333; margin: 0; white-space: pre-wrap; }
.loading-inline, .empty-inline { font-size: 12px; color: #888; padding: 8px 0; }
.show-more-wrap { margin-top: 12px; text-align: center; }
.show-more { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 6px 14px; font-size: 12px; cursor: pointer; }
.show-more:hover { background: #f5f5f5; }
</style>
