import * as React from "react";
import { EmojiRatingSelector, type EmojiOption } from "@/components/ui/emoji-rating-selector";

const options: EmojiOption[] = [
  { value: 1, image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/pouting-face_1f621.png", label: "Terrible" },
  { value: 2, image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/expressionless-face_1f611.png", label: "Not great" },
  { value: 3, image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/thinking-face_1f914.png", label: "Okay" },
  { value: 4, image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/smiling-face_263a-fe0f.png", label: "Good" },
  { value: 5, image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/smiling-face-with-heart-eyes_1f60d.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