// HeartDisplay, Avatar, HeartProgress — small display-only components.

const HeartDisplay = ({ count, isStale }) => (
  <div className="flex gap-0.5 items-center">
    {[...Array(5)].map((_, i) => (
      <Heart key={i} size={14} className={i < count ? "fill-pink-400 text-pink-400" : "text-pink-100"} />
    ))}
    {isStale && <Sparkles size={12} className="text-pink-300 ml-1" />}
  </div>
);

const Avatar = ({ emoji, level, size = 'md', onClick }) => {
  const dim = size === 'lg' ? 'w-20 h-20 text-4xl' : 'w-12 h-12 text-2xl';
  const decor = CUTENESS_DECOR[level] || '';
  const ring = level >= 5 ? 'ring-4 ring-amber-200' : level >= 3 ? 'ring-4 ring-pink-300' : level >= 1 ? 'ring-2 ring-pink-200' : 'ring-1 ring-pink-100';
  return (
    <div onClick={onClick} className={`relative shrink-0 ${onClick ? 'cursor-pointer' : ''}`}>
      <div className={`${dim} avatar-bob rounded-full bg-gradient-to-br from-pink-100 to-rose-100 flex items-center justify-center ${ring} shadow-glow`}>
        <span>{emoji}</span>
      </div>
      {decor && <span className={`absolute -top-1 -right-1 ${size === 'lg' ? 'text-2xl' : 'text-base'} drop-shadow`}>{decor}</span>}
    </div>
  );
};

const HeartProgress = ({ progress }) => {
  const pct = Math.max(0, Math.min(1, progress || 0));
  const full = pct >= 1;
  const clipId = React.useMemo(() => 'hp-' + Math.random().toString(36).slice(2, 8), []);
  return (
    <div className="relative w-10 h-10 shrink-0" title={`${Math.round(pct*100)}% of today's goal`}>
      <svg viewBox="0 0 24 24" className="w-10 h-10">
        <defs>
          <clipPath id={clipId}><path d={HEART_PATH} /></clipPath>
        </defs>
        <path d={HEART_PATH} fill="#fce7f3" stroke="#f9a8d4" strokeWidth="1.2" />
        <g clipPath={`url(#${clipId})`}>
          <rect x="0" y={24 - 24 * pct} width="24" height={24 * pct} fill="#f472b6" />
        </g>
        <path d={HEART_PATH} fill="none" stroke="#f472b6" strokeWidth="1.4" />
      </svg>
      {full && [...Array(5)].map((_, i) => (
        <Sparkles key={i} size={9} className="progress-sparkle text-pink-300" style={{ left: `${10 + i*16}%`, top: `${20 + (i%2)*30}%`, animationDelay: `${i*0.18}s` }} />
      ))}
    </div>
  );
};

window.HeartDisplay  = HeartDisplay;
window.Avatar        = Avatar;
window.HeartProgress = HeartProgress;