"use client" import { useState } from "react" // shadcn import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" // third-party import { cn } from "cn" // assets import { Sparkles } from "lucide-react" interface RatingOption { value: number emoji: string label: string description: string color: string bgColor: string borderColor: string } const RATING_OPTIONS: RatingOption[] = [ { value: 1, emoji: "😡", label: "Terrible", description: "We sincerely apologize and will improve.", color: "text-red-500", bgColor: "bg-red-500/10", borderColor: "border-red-500/30", }, { value: 2, emoji: "😕", label: "Poor", description: "Below expectations. Thanks for your feedback.", color: "text-orange-500", bgColor: "bg-orange-500/10", borderColor: "border-orange-500/30", }, { value: 3, emoji: "😐", label: "Okay", description: "Average experience, room for improvement.", color: "text-amber-500", bgColor: "bg-amber-500/10", borderColor: "border-amber-500/30", }, { value: 4, emoji: "🙂", label: "Good", description: "Great service! We are glad you enjoyed it.", color: "text-emerald-500", bgColor: "bg-emerald-500/10", borderColor: "border-emerald-500/30", }, { value: 5, emoji: "🤩", label: "Amazing", description: "Exceeded all expectations! Thank you!", color: "text-primary", bgColor: "bg-primary/10", borderColor: "border-primary/30", }, ] // ------------------------------ | SLIDER - EMOJI RATING | ------------------------------ // export function SliderEmojiRating() { const [rating, setRating] = useState(4) const currentOption = RATING_OPTIONS.find((opt) => opt.value === rating) || RATING_OPTIONS[3] return (

Satisfaction Rating Slide to rate your experience

{rating} / 5

{/* Emoji preview badge */}

{currentOption.emoji}

{currentOption.label}

{currentOption.description}

{/* Slider Control */}

{ const nextVal = Array.isArray(val) ? val[0] : val if (typeof nextVal === "number") { setRating(nextVal) } }} min={1} max={5} step={1} className="w-full cursor-pointer" /> {/* Clickable step markers */}

{RATING_OPTIONS.map((opt) => { const isSelected = opt.value === rating return ( ) })}

) }