import * as React from "react";
import { EmojiRatingSelector, type EmojiOption } from "@/components/ui/emoji-rating-selector";
const options: EmojiOption[] = [
{ value: 1, image: "https://cdn.21st.dev/assets/mirror/83/838209218907165cee29e74f6cf52584d4dc39bb6c743f5afabceb5faf35a390.png", label: "Terrible" },
{ value: 2, image: "https://cdn.21st.dev/assets/mirror/d4/d4603cc06d863fdb72f307210f6aacf1bcf50ff42c38f1e490a2ac9a800f1c72.png", label: "Not great" },
{ value: 3, image: "https://cdn.21st.dev/assets/mirror/5e/5e96a08b7affa56d99c930a392e6dbe7e889629707e5b6e218b8e369dd7e6c6b.png", label: "Okay" },
{ value: 4, image: "https://cdn.21st.dev/assets/mirror/53/53f356538a1ad3192933abda9e764febd8e785d85ae5cecc668d075ac3239905.png", label: "Good" },
{ value: 5, image: "https://cdn.21st.dev/assets/mirror/20/20114999d863c822f22929542b79ac020270e4b4cc78e156f711a0845d83adc6.png", label: "Excellent" },
];
export function Demo() {
const [rating, setRating] = React.useState<number | string>();
return (
<EmojiRatingSelector
options={options}
value={rating}
onChange={setRating}
defaultLabel="Hover to choose"
/>
);
}
export default Demo
