'use client'

import React from 'react'

interface StarRatingProps {
  stars: number       // 0-3
  total?: number      // total stars earned (shown as badge)
  size?: 'sm' | 'md' | 'lg'
  animated?: boolean
  showLabel?: boolean
}

const sizeMap = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl' }

export function StarRating({ stars, total, size = 'md', animated = false, showLabel = false }: StarRatingProps) {
  return (
    <div className="inline-flex items-center gap-1">
      {[1, 2, 3].map((i) => (
        <span
          key={i}
          className={`${sizeMap[size]} transition-all ${
            i <= stars
              ? `text-yellow-400 ${animated ? 'animate-bounce' : ''}`
              : 'text-gray-300 dark:text-gray-600'
          }`}
          style={animated && i <= stars ? { animationDelay: `${(i - 1) * 150}ms` } : undefined}
        >
          {i <= stars ? '\u2B50' : '\u2606'}
        </span>
      ))}
      {total != null && showLabel && (
        <span className="ml-1 text-sm font-bold text-yellow-500 tabular-nums">{total}</span>
      )}
    </div>
  )
}

/** Calculate stars from accuracy percentage */
export function accuracyToStars(correct: number, total: number): number {
  if (total === 0) return 0
  const pct = (correct / total) * 100
  if (pct >= 100) return 3
  if (pct >= 70) return 2
  return 1
}