Star Rating

import { StarRating } from "@/components/ui/star-rating";
import { useState } from "react"

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

  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Basic Usage */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Read-only</h3>
        <div className="flex items-center gap-6">
          <StarRating value={4} />
          <StarRating value={2} />
          <StarRating value={5} />
        </div>
      </div>

      {/* Interactive */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Interactive</h3>
        <div className="flex items-center gap-4">
          <StarRating 
            value={rating} 
            readOnly={false} 
            onChange={setRating} 
          />
          <span className="text-sm text-zinc-600">
            Selected: {rating} / 5
          </span>
        </div>
      </div>

      {/* Sizes */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Sizes</h3>
        <div className="flex items-center gap-6">
          <StarRating value={3} size="sm" />
          <StarRating value={3} size="md" />
          <StarRating value={3} size="lg" />
        </div>
      </div>

      {/* Custom Colors */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Custom Colors</h3>
        <div className="flex items-center gap-6">
          <StarRating value={4} color="#EC4899" />
          <StarRating value={4} color="#10B981" />
          <StarRating value={4} color="#6366F1" />
          <StarRating value={4} color="#F97316" />
        </div>
      </div>

      {/* Different Max */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Custom Max Stars</h3>
        <div className="flex items-center gap-6">
          <StarRating value={2} max={3} />
          <StarRating value={7} max={10} size="sm" />
        </div>
      </div>
    </div>
  )
}