'use client'

import React from 'react'

interface CrownBadgeProps {
  crowns: number
  size?: 'sm' | 'md' | 'lg'
  showLabel?: boolean
}

export function CrownBadge({ crowns, size = 'md', showLabel = true }: CrownBadgeProps) {
  const sizeClasses = {
    sm: 'text-base',
    md: 'text-xl',
    lg: 'text-3xl',
  }

  const isGold = crowns >= 3
  const isSilver = crowns >= 1

  return (
    <div className="inline-flex items-center gap-1.5">
      <span className={`${sizeClasses[size]} ${isGold ? 'animate-pulse' : ''}`}>
        {isGold ? '👑' : isSilver ? '🥈' : '⭐'}
      </span>
      {showLabel && (
        <span className={`font-bold tabular-nums ${
          isGold ? 'text-yellow-400' : isSilver ? 'text-slate-300' : 'text-white/50'
        } ${size === 'sm' ? 'text-xs' : size === 'md' ? 'text-sm' : 'text-base'}`}>
          {crowns}
        </span>
      )}
    </div>
  )
}