Rating

"use client"

import { useState } from "react"

import { Rating } from "@/components/forms/rating"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  yours: "Your rating",
  average: "Average rating",
} as const

// Interactive with value and onValueChange; a display without them.
export default function RatingDemo() {
  const [value, setValue] = useState(3)
  return (
    <div className="grid justify-items-center gap-6 text-sm text-muted-foreground">
      <div className="grid justify-items-center gap-1">
        <span>{COPY.yours}</span>
        <Rating
          label={COPY.yours}
          value={value}
          onValueChange={setValue}
          size="lg"
        />
      </div>
      <div className="grid justify-items-center gap-1">
        <span>{COPY.average}</span>
        <Rating label={COPY.average} value={4} />
      </div>
    </div>
  )
}