// Icons — Google Material Symbols (Outlined, weight 400).
// Same API surface as before: <I.IconName size={16} /> renders a Material Symbol.
// Single source of truth: change the symbol name here and it propagates everywhere.

const MaterialIcon = ({ name, size = 16, fill = 0, weight = 400, style, className = '', ...rest }) => (
  <span
    className={'msym ' + className}
    style={{
      fontSize: size + 'px',
      lineHeight: 1,
      width: size,
      height: size,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${Math.min(48, Math.max(20, size))}`,
      ...style,
    }}
    {...rest}
  >{name}</span>
);

// Map our semantic icon names to Material Symbol names
const MS_MAP = {
  // Navigation
  Dashboard:   'space_dashboard',
  Chat:        'forum',
  Users:       'group',
  Bot:         'smart_toy',
  Chart:       'bar_chart_4_bars',
  Plug:        'settings_input_component',
  Card:        'credit_card',
  Settings:    'settings',

  // Common UI
  Search:      'search',
  Bell:        'notifications',
  Plus:        'add',
  Minus:       'remove',
  Filter:      'filter_list',
  Check:       'check',
  X:           'close',
  Dots:        'more_horiz',
  Star:        'star',
  Tag:         'sell',
  Download:    'download',
  Upload:      'upload',
  Refresh:     'refresh',
  RefreshCw:   'refresh',
  Copy:        'content_copy',
  ExternalLink:'open_in_new',
  Eye:         'visibility',
  Lock:        'lock',
  Logout:      'logout',
  Sun:         'light_mode',
  User:        'person',
  Sparkle:     'auto_awesome',
  Book:        'menu_book',
  Doc:         'description',

  // Comms
  Phone:       'call',
  PhoneIn:     'call_received',
  PhoneOut:    'call_made',
  Mail:        'mail',
  WhatsApp:    'chat',
  Send:        'send',
  Mic:         'mic',
  Headset:     'headset_mic',

  // Media controls
  Pause:       'pause',
  Play:        'play_arrow',
  Hand:        'pan_tool',

  // Arrows / chevrons
  ArrowRight:  'arrow_forward',
  ArrowR:      'arrow_forward',
  ArrowUp:     'arrow_upward',
  ArrowDown:   'arrow_downward',
  ChevR:       'chevron_right',
  ChevD:       'expand_more',
  ChevU:       'expand_less',

  // Status & info
  AlertTriangle: 'warning',
  Info:        'info',
  Clock:       'schedule',
  Target:      'crosshairs',

  // Places & business
  Building:    'domain',
  Home:        'home',
  MapPin:      'location_on',
  Wallet:      'account_balance_wallet',
  Globe:       'language',

  // Operations
  Ticket:      'confirmation_number',
  Wrench:      'build',
};

// Build the I object: each key returns a component that renders the Material symbol
const I = Object.fromEntries(
  Object.entries(MS_MAP).map(([key, name]) => [
    key,
    (props) => <MaterialIcon name={name} {...props} />
  ])
);

window.I = I;
window.MaterialIcon = MaterialIcon;