// ── Icon set — Google Material Symbols Rounded (single family, weight 400) ──
// The <Icon name="…"> API is preserved; each internal name maps to the
// official Material Symbols ligature, rendered with the variable font loaded
// in index.html. This guarantees one consistent family + weight everywhere.
const MS_NAME = {
  'arrow-left':   'arrow_back',
  'arrow-right':  'arrow_forward',
  'chevron-down': 'keyboard_arrow_down',
  'chevron-up':   'keyboard_arrow_up',
  'chevron-right':'chevron_right',
  'chevron-left': 'chevron_left',
  'check':        'check',
  'check-circle': 'check_circle',
  'plus':         'add',
  'minus':        'remove',
  'x':            'close',
  'edit':         'edit',
  'copy':         'content_copy',
  'eye':          'visibility',
  'trash':        'delete',
  'sparkle':      'auto_awesome',
  'image':        'image',
  'grid':         'grid_view',
  'list':         'list',
  'book':         'menu_book',
  'file-pdf':     'picture_as_pdf',
  'file-doc':     'description',
  'layers':       'layers',
  'upload':       'upload',
  'school':       'school',
  'power':        'power_settings_new',
  'search':       'search',
  'help':         'help',
  'logout':       'logout',
  'settings':     'settings',
  'flag':         'flag',
  'refresh':      'refresh',
  'target':       'track_changes',
  'clipboard':    'assignment',
  'doc-check':    'assignment_turned_in',
  'list-alt-check':'list_alt_check',
  'clock':        'schedule',
  'menu-dots':    'more_vert',
  'drag':         'drag_indicator',
  'type':         'text_fields',
  'list-check':   'checklist',
  'pencil-line':  'edit_note',
  'circle-dot':   'radio_button_checked',
  'rows':         'reorder',
  'gauge':        'speed',
  'send':         'send',
  'undo':         'undo',
  'download':     'download',
  'arrow-up':     'arrow_upward',
  'arrow-down':   'arrow_downward',
  'lightbulb':    'lightbulb',
  'puzzle':       'extension',
  'video':        'smart_display',
  'gallery':      'collections',
  'text-block':   'subject',
  'building':     'apartment',
  'users':        'group',
  'info':         'info',
};

function Icon({ name, size = 20, className = '', style, fill = false }) {
  const glyph = MS_NAME[name] || (name || '').replace(/-/g, '_');
  const px = size;
  const opsz = Math.max(20, Math.min(48, px));
  const classes = 'material-symbols-rounded' + (fill ? ' ms-fill' : '') + (className ? ' ' + className : '');
  return (
    <span className={classes} aria-hidden="true" translate="no"
      style={{
        fontSize: px + 'px', width: px + 'px', height: px + 'px',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${opsz}`,
        ...(style || {}),
      }}>
      {glyph}
    </span>
  );
}

// EdebéOn+ wordmark recreated in markup (logo asset is a single flat path)
function EdebeonLogo({ className = '', dark = false }) {
  const c = dark ? '#111111' : '#1a1a1a';
  return (
    <div className={'flex items-center gap-[3px] select-none ' + className} style={{ color: c }}>
      <span style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.5px', lineHeight: 1 }}>edebé</span>
      <span className="inline-flex items-center" style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.5px', lineHeight: 1, marginLeft: 4 }}>
        <span className="relative inline-flex items-center justify-center" style={{ width: 22, height: 22 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2.6" strokeLinecap="round">
            <circle cx="12" cy="13" r="8.5" stroke={c} strokeWidth="2.6" />
            <path d="M12 3.5V10" />
          </svg>
        </span>
        <span>n</span>
        <sup style={{ fontSize: 13, marginLeft: 1, top: '-0.5em' }}>+</sup>
      </span>
    </div>
  );
}

window.Icon = Icon;
window.EdebeonLogo = EdebeonLogo;