Leave Rating

"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Icon } from "@iconify/react";

interface LeaveRatingProps {
    onRate?: (rating: number) => void;
    maxStars?: number;
}

export function LeaveRating({ onRate, maxStars = 5 }: LeaveRatingProps) {
    const [hovered, setHovered] = useState(0);
    const [rating, setRating] = useState(0);
    const [submitted, setSubmitted] = useState(false);

    const display = hovered || rating;

    const labels: Record<number, string> = {
        1: "Poor", 2: "Fair", 3: "Good", 4: "Great", 5: "Amazing!"
    };

    const handleRate = (star: number) => {
        setRating(star);
        setSubmitted(true);
        onRate?.(star);
    };

    if (submitted) {
        return (
            <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                className="flex flex-col items-center gap-3 p-8"
            >
                <div className="w-14 h-14 rounded-full bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center">
                    <Icon icon="solar:check-circle-bold-duotone" className="text-emerald-400" fontSize={32} />
                </div>
                <p className="text-white font-semibold">Thanks for your rating!</p>
                <div className="flex gap-1">
                    {Array.from({ length: rating }).map((_, i) => (
                        <Icon key={i} icon="solar:star-bold" className="text-amber-400" fontSize={20} />
                    ))}
                </div>
                <button onClick={() => { setSubmitted(false); setRating(0); }} className="text-xs text-zinc-500 hover:text-zinc-300 mt-1">Rate again</button>
            </motion.div>
        );
    }

    return (
        <div className="flex flex-col items-center gap-4 p-6">
            <p className="text-white font-medium text-sm">How would you rate this?</p>
            <div className="flex items-center gap-2">
                {Array.from({ length: maxStars }, (_, i) => i + 1).map((star) => (
                    <motion.button
                        key={star}
                        onMouseEnter={() => setHovered(star)}
                        onMouseLeave={() => setHovered(0)}
                        onClick={() => handleRate(star)}
                        whileHover={{ scale: 1.3 }}
                        whileTap={{ scale: 0.9 }}
                        className="focus:outline-none"
                        aria-label={`Rate ${star} stars`}
                    >
                        <Icon
                            icon={star <= display ? "solar:star-bold" : "solar:star-linear"}
                            className={`transition-colors duration-150 ${star <= display ? "text-amber-400" : "text-zinc-600"}`}
                            fontSize={32}
                        />
                    </motion.button>
                ))}
            </div>
            <motion.p
                key={display}
                initial={{ opacity: 0, y: 4 }}
                animate={{ opacity: 1, y: 0 }}
                className="text-sm text-zinc-500 h-5"
            >
                {display ? labels[display] : ""}
            </motion.p>
        </div>
    );
}