// public/components/dross_avatar.js
import { el } from '../dom.js';

// Returns a .dross-orb element rendering the chosen avatar. Colours come from
// CSS vars (--dross*), set on the element by the caller for per-user accent.
export function drossAvatar(variant = 'soft-eye', size = 60) {
  let inner;
  if (variant === 'wisp') {
    inner = [el('div', { class: 'b-core' }), el('div', { class: 'b-bright' })];
  } else if (variant === 'motes') {
    inner = [
      el('div', { class: 'd-ring' }, el('div', { class: 'd-mote' })),
      el('div', { class: 'd-ring r2' }, el('div', { class: 'd-mote' })),
      el('div', { class: 'd-core' })
    ];
  } else { // soft-eye (default)
    inner = [el('div', { class: 'av-eye' }, el('div', { class: 'av-pupil' }))];
  }
  return el('div', { class: 'dross-orb', style: { width: size + 'px', height: size + 'px' } }, ...inner);
}