// icons.jsx — Remix Icon (outline/line set) via webfont, wrapped so call-sites keep logical names.
// Brand: outline icons only. Remix "line" variants match that.
const REMIX = {
  check: "check-line",
  "chevron-down": "arrow-down-s-line",
  "chevron-up": "arrow-up-s-line",
  "chevron-left": "arrow-left-s-line",
  "chevron-right": "arrow-right-s-line",
  "chevrons-up-down": "expand-up-down-line",
  x: "close-line",
  search: "search-line",
  plus: "add-line",
  arrowRight: "arrow-right-line",
  calendar: "calendar-line",
  bell: "notification-3-line",
  user: "user-line",
  users: "team-line",
  settings: "settings-3-line",
  logout: "logout-box-r-line",
  trash: "delete-bin-line",
  copy: "file-copy-line",
  edit: "edit-line",
  info: "information-line",
  "alert-circle": "error-warning-line",
  "alert-triangle": "alert-line",
  "check-circle": "checkbox-circle-line",
  mail: "mail-line",
  lock: "lock-line",
  eye: "eye-line",
  "eye-off": "eye-off-line",
  "more-horizontal": "more-line",
  filter: "filter-3-line",
  download: "download-line",
  zap: "flashlight-line",
  layers: "stack-line",
  compass: "compass-3-line",
  shield: "shield-line",
  "credit-card": "bank-card-line",
  sun: "sun-line",
  moon: "moon-line",
  home: "dashboard-3-line",
  node: "node-tree",
  contract: "file-list-3-line",
  wallet: "wallet-3-line",
  help: "question-line",
  star: "star-line",
  "star-fill": "star-fill",
  code: "code-s-slash-line",
  grid: "layout-grid-line",
  layout: "layout-line",
  rocket: "rocket-2-line",
  book: "book-2-line",
  image: "image-line",
  globe: "global-line",
  building: "building-line",
  chart: "bar-chart-2-line",
  pie: "pie-chart-line",
  grip: "draggable",
  menu: "menu-line",
  send: "send-plane-line",
  clock: "time-line",
  refresh: "refresh-line",
  // component nav icons
  button: "radio-button-line",
  badge: "price-tag-3-line",
  toggle: "toggle-line",
  rating: "star-half-line",
  sliders: "equalizer-line",
  form: "survey-line",
  combobox: "dropdown-list",
  tags: "hashtag",
  number: "calculator-line",
  palette: "palette-line",
  tabs: "window-line",
  pagination: "more-line",
  stepper: "list-ordered",
  tree: "git-branch-line",
  "context-menu": "menu-unfold-line",
  card: "layout-line",
  accordion: "list-unordered",
  carousel: "slideshow-line",
  resize: "drag-move-line",
  dialog: "chat-3-line",
  command: "terminal-box-line",
  upload: "upload-cloud-2-line",
  drawer: "layout-right-line",
  alarm: "alarm-warning-line",
  table: "table-line",
  timeline: "history-line",
  inbox: "inbox-line",
  notification: "notification-2-line",
  loader: "loader-2-line",
  "file-code": "file-code-line",
  "avatar-circle": "account-circle-line",
  // totem domain icons
  monitor: "tv-2-line",
  tv: "tv-2-line",
  smartphone: "smartphone-line",
  rotate: "clockwise-line",
  list: "list-unordered",
  "play-list": "play-list-line",
  play: "play-line",
  pause: "pause-line",
  "skip-forward": "skip-forward-line",
  "map-pin": "map-pin-line",
  wifi: "wifi-line",
  "wifi-off": "wifi-off-line",
  link: "links-line",
  "qr-code": "qr-code-line",
  video: "film-line",
  signal: "signal-tower-line",
  dot: "circle-fill",
};

function Icon({ name, className = "", size, style }) {
  const ri = REMIX[name] || "question-line";
  const st = { ...(style || {}) };
  // font icons size by font-size; translate any width/size hint into it
  const fs = size != null ? size : st.width;
  if (fs != null) st.fontSize = typeof fs === "number" ? fs + "px" : fs;
  delete st.width; delete st.height;
  return React.createElement("i", {
    className: "ic ri-" + ri + (className ? " " + className : ""),
    style: st, "aria-hidden": true,
  });
}

window.Icon = Icon;