// Fluent-style 1.5px line icons drawn with currentColor (Excel ribbon set)
const Icon = ({ children, size = 16, className = "ic", viewBox = "0 0 16 16", strokeWidth = 1.25, fill = "none" }) => (
  <svg viewBox={viewBox} width={size} height={size} fill={fill} stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
       className={className}>
    {children}
  </svg>
);

const I = {
  // Carets / chevrons
  Caret:   () => <Icon size={9}><path d="M3 6l5 5 5-5" /></Icon>,
  CaretSm: () => <Icon size={7}><path d="M3 6l5 5 5-5" /></Icon>,
  ChevL:   () => <Icon size={12}><path d="M10 3l-5 5 5 5" /></Icon>,
  ChevR:   () => <Icon size={12}><path d="M6 3l5 5-5 5" /></Icon>,

  // Common
  Search:  () => <Icon size={13}><circle cx="7" cy="7" r="4" /><path d="M10 10l3 3" /></Icon>,
  X:       () => <Icon size={12}><path d="M4 4l8 8M12 4l-8 8" /></Icon>,
  Check:   () => <Icon size={12}><path d="M3 8.5l3 3 7-7" /></Icon>,
  Plus:    () => <Icon size={12}><path d="M8 3v10M3 8h10" /></Icon>,
  Comment: () => <Icon size={14}><path d="M2.5 4.5a2 2 0 012-2h7a2 2 0 012 2v5a2 2 0 01-2 2H7l-2.5 2v-2H4.5a2 2 0 01-2-2v-5z" /></Icon>,
  Share:   () => <Icon size={14}><path d="M5.5 8.5l5-3M5.5 7.5l5 3" /><circle cx="4" cy="8" r="1.5" /><circle cx="12" cy="4" r="1.5" /><circle cx="12" cy="12" r="1.5" /></Icon>,

  // Excel save indicator
  Save:    () => <Icon size={13}><path d="M3 2.5h7l2.5 2.5v8H3z" /><path d="M5.5 2.5v3h5v-3M5.5 13v-5h5v5" /></Icon>,

  // Clipboard / Paste (large variant)
  Paste:   () => <Icon size={22} viewBox="0 0 22 22"><path d="M5 4h12v15H5z" /><path d="M8 4V3a1.5 1.5 0 011.5-1.5h3A1.5 1.5 0 0114 3v1" /><path d="M8 4h6" /></Icon>,
  Cut:     () => <Icon size={14}><circle cx="4" cy="11" r="1.6" /><circle cx="12" cy="11" r="1.6" /><path d="M5 10L12.5 3M11 10L3.5 3" /></Icon>,
  Copy:    () => <Icon size={14}><rect x="4" y="4" width="8" height="9" rx="0.5" /><path d="M6 4V3a1 1 0 011-1h5a1 1 0 011 1v9" /></Icon>,
  Painter: () => <Icon size={14}><rect x="2.5" y="3.5" width="8" height="3" rx="0.5" /><path d="M10.5 5h2v3h-5v2l1 1v2.5h-3V11l1-1z" /></Icon>,

  // Font controls
  Bold:      () => <Icon size={14}><path d="M5 3h3.5a2 2 0 010 4H5zM5 7h4a2 2 0 010 4H5zM5 3v8" strokeWidth="1.4" /></Icon>,
  Italic:    () => <Icon size={14}><path d="M7 3h5M4 13h5M10 3l-3 10" /></Icon>,
  Underline: () => <Icon size={14}><path d="M5 2.5v5a3 3 0 006 0v-5M3.5 13.5h9" /></Icon>,
  Strike:    () => <Icon size={14}><path d="M4 4h6a2 2 0 011 4M7 7c-2 1-2 4 1 4h3M3 8h10" /></Icon>,
  Border:    () => <Icon size={14}><rect x="2.5" y="2.5" width="11" height="11" /><path d="M2.5 8h11M8 2.5v11" strokeDasharray="1.5 1.5" /></Icon>,
  Fill:      () => <Icon size={14}><path d="M3 7.5l5-5 5 5-5 5z" /><path d="M3 7.5h10" /><circle cx="13" cy="11" r="1.2" /></Icon>,
  TextColor: () => <Icon size={14}><path d="M4 11.5L8 3l4 8.5M5.5 9h5" /></Icon>,
  FontUp:    () => <Icon size={14}><path d="M3 11L6 4l3 7M4 9h4M11 6v6M11 6l-1 1M11 6l1 1" strokeWidth="1.1" /></Icon>,
  FontDown:  () => <Icon size={14}><path d="M4 10L7 3l3 7M5 8h4M11.5 4v6M11.5 10l-1-1M11.5 10l1-1" strokeWidth="1.1" /></Icon>,

  // Alignment
  AlignLeft:    () => <Icon size={14}><path d="M2.5 4h11M2.5 7h7M2.5 10h11M2.5 13h7" /></Icon>,
  AlignCenter:  () => <Icon size={14}><path d="M2.5 4h11M4.5 7h7M2.5 10h11M4.5 13h7" /></Icon>,
  AlignRight:   () => <Icon size={14}><path d="M2.5 4h11M6.5 7h7M2.5 10h11M6.5 13h7" /></Icon>,
  AlignJustify: () => <Icon size={14}><path d="M2.5 4h11M2.5 7h11M2.5 10h11M2.5 13h11" /></Icon>,
  VTop:    () => <Icon size={14}><path d="M3 3h10" /><rect x="5" y="6" width="6" height="8" /></Icon>,
  VMid:    () => <Icon size={14}><path d="M3 8h2M11 8h2" /><rect x="5" y="4" width="6" height="8" /></Icon>,
  VBot:    () => <Icon size={14}><path d="M3 13h10" /><rect x="5" y="2" width="6" height="8" /></Icon>,
  AngleUp: () => <Icon size={14}><path d="M3 13L11 5M11 9V5h-4" /></Icon>,
  IndentDec: () => <Icon size={14}><path d="M2.5 4h11M6 7h7M2.5 10h11M6 13h7M5 6l-2 2 2 2" /></Icon>,
  IndentInc: () => <Icon size={14}><path d="M2.5 4h11M6 7h7M2.5 10h11M6 13h7M2.5 6l2 2-2 2" /></Icon>,
  Wrap:    () => <Icon size={14}><path d="M2.5 4h11M2.5 8h9a2 2 0 010 4H8l1.5-1.5M9.5 13.5L8 12M2.5 12h3" /></Icon>,
  Merge:   () => <Icon size={14}><rect x="2.5" y="4.5" width="11" height="7" /><path d="M6 8.5h4M8 6.5l-2 2 2 2M8 6.5l2 2-2 2" /></Icon>,

  // Numbers
  Currency:  () => <Icon size={14}><path d="M11 4h-4a1.5 1.5 0 000 3h2a1.5 1.5 0 010 3h-4M8 3v8" /></Icon>,
  Percent:   () => <Icon size={14}><path d="M3.5 12L12.5 4" /><circle cx="5" cy="5" r="1.5" /><circle cx="11" cy="11" r="1.5" /></Icon>,
  Comma:     () => <Icon size={14}><path d="M4 4.5h2v3H4zM10 7v4h2V7zM4 11.5h2v2c0 1-1 1.5-2 1.5" /></Icon>,
  IncDecim:  () => <Icon size={14}><path d="M3 4.5h2v3H3zM3 11h2v1H3zM7 5v6M11 5v6M13 5h-1l-1 6h1M9 11l1-1 1 1" strokeWidth="1.1" /></Icon>,
  DecDecim:  () => <Icon size={14}><path d="M3 4.5h2v3H3zM3 11h2v1H3zM7 5v6M11 5v6M9 5l1 1 1-1M13 11h-1l-1-6h1" strokeWidth="1.1" /></Icon>,

  // Styles
  Conditional:    () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="3" width="16" height="16" rx="1" /><path d="M3 10h16M11 3v16M3 6h16" strokeWidth="0.8" /><path d="M14 13l-3 4-1.5-2" strokeWidth="1.5" stroke="#107C10" /></Icon>,
  FormatAsTable:  () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="3" width="16" height="16" rx="1" /><path d="M3 7h16M3 11h16M3 15h16M7 3v16M11 3v16M15 3v16" strokeWidth="0.8" /><rect x="3" y="3" width="16" height="4" fill="#107C10" stroke="none" opacity="0.85" /></Icon>,
  CellStyles:     () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="4" width="16" height="14" rx="1" /><rect x="3" y="4" width="8" height="6" fill="#0F6CBD" stroke="none" opacity="0.85" /><path d="M3 10h16M11 4v14" strokeWidth="0.8" /></Icon>,

  // Cells (insert/delete/format)
  InsertCell: () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="3" width="13" height="13" /><path d="M3 9h13M9 3v13" /><circle cx="17" cy="17" r="3" fill="#fff" /><path d="M17 15v4M15 17h4" stroke="#107C10" strokeWidth="1.4" /></Icon>,
  DeleteCell: () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="3" width="13" height="13" /><path d="M3 9h13M9 3v13" /><circle cx="17" cy="17" r="3" fill="#fff" /><path d="M15 17h4" stroke="#C50F1F" strokeWidth="1.4" /></Icon>,
  FormatCell: () => <Icon size={22} viewBox="0 0 22 22"><rect x="3" y="3" width="13" height="13" /><path d="M3 9h13M9 3v13" /><circle cx="17" cy="17" r="3" fill="#fff" /><path d="M15.5 17h3M17 15.5v3" stroke="#666" strokeWidth="1.2" /></Icon>,

  // Editing
  AutoSum:     () => <Icon size={20} viewBox="0 0 20 20"><path d="M14 3.5h-9L10.5 10 5 16.5h9" strokeWidth="1.5" /></Icon>,
  Fill2:       () => <Icon size={14}><path d="M3 4.5h8v2L9 8.5l-6-6z" /><path d="M5 9l2 2 4-4" /></Icon>,
  Clear:       () => <Icon size={14}><path d="M3 3l8 8M3.5 12.5l4-4M11 9.5l-6 4 -2-2L8 3" /></Icon>,
  SortFilter:  () => <Icon size={20} viewBox="0 0 20 20"><path d="M3 4.5h11l-4 5v4l-3 1.5v-5.5z" /></Icon>,
  Find:        () => <Icon size={20} viewBox="0 0 20 20"><circle cx="8" cy="8" r="5" /><path d="M12 12l4 4" /></Icon>,
  Analyze:     () => <Icon size={20} viewBox="0 0 20 20"><path d="M3 16h14M5 13l3-5 3 3 5-7" /><circle cx="5" cy="13" r="1" fill="currentColor" /><circle cx="8" cy="8" r="1" fill="currentColor" /><circle cx="11" cy="11" r="1" fill="currentColor" /></Icon>,
  Sensitivity: () => <Icon size={14}><path d="M3.5 6L8 2.5 12.5 6v4L8 13.5 3.5 10z" /></Icon>,

  // Format panel icons
  FmtFont:    () => <Icon size={14}><path d="M3 12L7 3l4 9M4.5 9h5" /></Icon>,
  FmtFill:    () => <Icon size={14}><path d="M3 7.5l5-5 5 5-5 5z" /></Icon>,
  FmtBorder:  () => <Icon size={14}><rect x="2.5" y="2.5" width="11" height="11" /></Icon>,
  FmtNum:     () => <Icon size={14}><path d="M3 4l2-1v10M9 4.5a2 2 0 014 0c0 2-4 3-4 6h4" /></Icon>,
  FmtAlign:   () => <Icon size={14}><path d="M2.5 4h11M2.5 7h7M2.5 10h11M2.5 13h9" /></Icon>,
  FmtEffect:  () => <Icon size={14}><circle cx="8" cy="8" r="4" /><path d="M8 2v2M8 12v2M2 8h2M12 8h2" /></Icon>,

  // View / status bar
  ViewNormal:  () => <Icon size={13}><rect x="2.5" y="2.5" width="11" height="11" /><path d="M2.5 6h11M2.5 9.5h11M6 2.5v11M9.5 2.5v11" strokeWidth="0.9" /></Icon>,
  ViewLayout:  () => <Icon size={13}><rect x="2.5" y="2.5" width="5" height="11" /><rect x="8.5" y="2.5" width="5" height="11" /></Icon>,
  ViewBreak:   () => <Icon size={13}><rect x="2.5" y="2.5" width="11" height="11" /><path d="M2.5 8h4M9.5 8h4M8 2.5v11" strokeDasharray="1 1.5" strokeWidth="0.9" /></Icon>,
  ZoomOut:     () => <Icon size={12}><circle cx="6" cy="6" r="3.2" /><path d="M4.5 6h3M8.4 8.4L11 11" /></Icon>,
  ZoomIn:      () => <Icon size={12}><circle cx="6" cy="6" r="3.2" /><path d="M4.5 6h3M6 4.5v3M8.4 8.4L11 11" /></Icon>,
  Access:      () => <Icon size={13}><circle cx="8" cy="3.5" r="1.2" /><path d="M3.5 6h9M8 6v4M8 10l-2 3.5M8 10l2 3.5" /></Icon>,
  Spreadsheet: () => <Icon size={13}><rect x="2.5" y="2.5" width="11" height="11" /></Icon>,
};

window.I = I;
window.Icon = Icon;
