Rating

import { Rating } from '@/components/ui/rating'

export default function Example() {
  const [rating, setRating] = useState(3)

  return (
    <>
      {/* Basic rating */}
      <Rating value={rating} onChange={setRating} />

      {/* With label and value display */}
      <Rating
        label="Rate this product"
        value={rating}
        onChange={setRating}
        showValue
        size="lg"
      />

      {/* Half-star rating with hearts */}
      <Rating
        value={rating}
        onChange={setRating}
        allowHalf
        variant="heart"
      />

      {/* Custom colors */}
      <Rating
        value={4}
        showValue
        emptyColor="text-slate-200"
        fillColor="text-emerald-500"
        hoverColor="text-emerald-600"
      />

      {/* Read-only display */}
      <Rating value={4.5} readOnly allowHalf />
    </>
  )
}