Rating with review text input

<script setup lang="ts">
import { ref } from "vue"
import { Rating } from "@/components/reui/rating"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

const rating = ref(0)
const review = ref("")

function onReviewInput(e: Event) {
  review.value = (e.target as HTMLTextAreaElement).value
}
</script>

<template>
  <Card class="mx-auto w-full max-w-xs">
    <CardContent class="space-y-5">
      <div class="flex flex-col items-center gap-3">
        <h3 class="text-sm font-semibold">Write a Review</h3>
        <Rating v-model:rating="rating" :editable="true" />
        <p v-if="rating > 0" class="text-muted-foreground text-xs">
          {{
            rating <= 2
              ? "We're sorry to hear that"
              : rating <= 3
                ? "Thanks for your feedback"
                : "Glad you enjoyed it!"
          }}
        </p>
      </div>

      <div class="space-y-2">
        <Label for="review-text" class="text-sm">Your review</Label>
        <Textarea
          id="review-text"
          :value="review"
          placeholder="Tell us what you think..."
          :rows="3"
          @input="onReviewInput"
        />
      </div>

      <Button :disabled="rating === 0" size="sm" class="w-full">
        Submit Review
      </Button>
    </CardContent>
  </Card>
</template>