"use client";

import { Star } from "lucide-react";
import { motion, useSpring, useTransform } from "framer-motion";
import { useEffect } from "react";

interface ScoreDisplayProps {
  score: number;
}

export function ScoreDisplay({ score }: ScoreDisplayProps) {
  const spring = useSpring(0, { stiffness: 100, damping: 20 });
  const display = useTransform(spring, (v) => Math.round(v).toLocaleString());

  useEffect(() => {
    spring.set(score);
  }, [score, spring]);

  return (
    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10">
      <Star size={14} className="text-gold" />
      <motion.span className="text-sm font-bold tabular-nums">{display}</motion.span>
    </div>
  );
}