// components/rinpo-avatar-image.jsx — locked full-body standing PNG (size variants only)

function RinpoAvatarImage({ variant, badge, showPill, className, onClick, asButton, ariaLabel, state: animState, interactive }) {
  const assets = window.RinpoAssets;
  if (!assets) return null;

  const src = assets.standing;
  if (typeof src !== 'string' || !src.endsWith('rinpo-standing.png')) {
    console.warn('RINPO avatar lock violated — only rinpo-standing.png allowed');
    return null;
  }

  // Size-only variants (legacy thumb/tile/splash map to compact/hero — never crop)
  var raw = variant || 'compact';
  var v = raw;
  if (raw === 'thumb' || raw === 'tile') v = 'compact';
  if (raw === 'splash') v = 'hero';

  const st = animState || 'idle';
  const wrapClass = [
    'rinpo-avatar',
    'rinpo-avatar--' + v,
    'rinpo-avatar--fullbody',
    'rinpo-avatar--state-' + st,
    interactive || asButton || onClick ? 'rinpo-avatar--interactive' : '',
    className || '',
  ].filter(Boolean).join(' ');

  const imgClass =
    v === 'fab'
      ? 'rinpo-avatar__img rinpo-avatar__img--fab'
      : 'rinpo-avatar__img rinpo-avatar__img--' + v;

  const img = (
    <img
      src={src}
      alt="RINPO assistant"
      className={imgClass}
      decoding="async"
      draggable={false}
    />
  );

  const inner = (
    <>
      {v === 'fab' && <span className="rinpo-avatar__glow" aria-hidden="true" />}
      {img}
      {showPill !== false && v === 'fab' && (
        <span className="rinpo-avatar__pill">{(assets.brand && assets.brand.pill) || 'RINPO'}</span>
      )}
      {badge != null && badge > 0 && <span className="rinpo-avatar__badge">{badge}</span>}
      {v === 'fab' && <span className={'rinpo-avatar__mouth rinpo-avatar__mouth--' + st} aria-hidden="true" />}
    </>
  );

  if (asButton || onClick) {
    return (
      <button
        type="button"
        className={wrapClass}
        onClick={onClick}
        aria-label={ariaLabel || 'Open RINADS PHONE'}
      >
        {inner}
      </button>
    );
  }

  return <div className={wrapClass}>{inner}</div>;
}

window.RinpoAvatarImage = RinpoAvatarImage;