Rating with review summary

<script setup lang="ts">
import { Rating } from "@/components/reui/rating"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"

const distribution = [
  { stars: 5, count: 124, percentage: 62 },
  { stars: 4, count: 45, percentage: 22 },
  { stars: 3, count: 18, percentage: 9 },
  { stars: 2, count: 8, percentage: 4 },
  { stars: 1, count: 5, percentage: 3 },
]
</script>

<template>
  <div class="mx-auto w-full max-w-xs space-y-4">
    <div class="flex flex-col items-center gap-2">
      <span class="text-3xl font-semibold">4.6</span>
      <Rating :rating="4.6" size="sm" />
      <span class="text-muted-foreground text-xs">
        Based on 200 reviews
      </span>
    </div>
    <Separator />
    <div class="space-y-2">
      <div v-for="row in distribution" :key="row.stars" class="flex items-center gap-3 text-sm">
        <span class="text-muted-foreground w-3 text-right text-xs">{{ row.stars }}</span>
        <Progress
          :model-value="row.percentage"
          class="h-1.5 flex-1 **:data-[slot=progress-indicator]:bg-yellow-400"
        />
        <span class="text-muted-foreground w-7 text-right text-xs">{{ row.count }}</span>
      </div>
    </div>
  </div>
</template>