// icons.jsx — clean stroke icon set (inherit currentColor) + shared UI bits.

function Ico({ d, size = 24, sw = 1.8, fill = "none", children, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {d ? <path d={d} /> : children}
    </svg>
  );
}

// Tab + action icons
const IconCar = (p) => <Ico {...p}><path d="M3 13l1.8-4.6A2 2 0 0 1 6.7 7h10.6a2 2 0 0 1 1.9 1.4L21 13" /><path d="M3 13h18v4a1 1 0 0 1-1 1h-1.5a1 1 0 0 1-1-1v-1H6.5v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" /><circle cx="7" cy="15.5" r=".5" /><circle cx="17" cy="15.5" r=".5" /></Ico>;
const IconVan = (p) => <Ico {...p}><path d="M3 7h11l4 4h2a1 1 0 0 1 1 1v4H3z" /><path d="M3 7v9" /><circle cx="7.5" cy="16" r="1.6" /><circle cx="16.5" cy="16" r="1.6" /></Ico>;
const IconPin = (p) => <Ico {...p}><path d="M12 21s-6.5-5.6-6.5-10.5a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z" /><circle cx="12" cy="10.5" r="2.4" /></Ico>;
const IconPinPlus = (p) => <Ico {...p}><path d="M12 21s-6.5-5.6-6.5-10.5a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z" /><path d="M12 7.5v6M9 10.5h6" /></Ico>;
const IconNavArrow = (p) => <Ico {...p}><path d="M12 3l7 16-7-3.6L5 19z" /></Ico>;
const IconCompass = (p) => <Ico {...p}><circle cx="12" cy="12" r="9" /><path d="M15.5 8.5l-2 5-5 2 2-5z" fill="currentColor" stroke="none" /></Ico>;
const IconClock = (p) => <Ico {...p}><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></Ico>;
const IconPlus = (p) => <Ico {...p}><path d="M12 5v14M5 12h14" /></Ico>;
const IconChevron = (p) => <Ico {...p}><path d="M9 6l6 6-6 6" /></Ico>;
const IconChevronDown = (p) => <Ico {...p}><path d="M6 9l6 6 6-6" /></Ico>;
const IconTrash = (p) => <Ico {...p}><path d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13" /></Ico>;
const IconEdit = (p) => <Ico {...p}><path d="M4 20h4L19 9l-4-4L4 16z" /><path d="M14 6l4 4" /></Ico>;
const IconStar = (p) => <Ico {...p} fill={p.filled ? "currentColor" : "none"}><path d="M12 4l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L4.2 9.7l5.4-.8z" /></Ico>;
const IconClose = (p) => <Ico {...p}><path d="M6 6l12 12M18 6L6 18" /></Ico>;
const IconCheck = (p) => <Ico {...p}><path d="M5 12.5l4.5 4.5L19 7" /></Ico>;
const IconNote = (p) => <Ico {...p}><path d="M5 4h14v16l-3-2-3 2-3-2-3 2z" /><path d="M9 9h6M9 13h4" /></Ico>;
const IconExternal = (p) => <Ico {...p}><path d="M14 5h5v5M19 5l-8 8" /><path d="M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></Ico>;
const IconCrosshair = (p) => <Ico {...p}><circle cx="12" cy="12" r="6.5" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" /></Ico>;
const IconReset = (p) => <Ico {...p}><path d="M4 12a8 8 0 1 1 2.3 5.6" /><path d="M4 20v-4h4" /></Ico>;

function carGlyph(emoji) {
  // pick a line glyph that matches the chosen emoji, else generic car
  if (emoji === "🚐" || emoji === "🚌" || emoji === "🚚") return IconVan;
  return IconCar;
}

Object.assign(window, {
  Ico, IconCar, IconVan, IconPin, IconPinPlus, IconNavArrow, IconCompass, IconClock,
  IconPlus, IconChevron, IconChevronDown, IconTrash, IconEdit, IconStar, IconClose,
  IconCheck, IconNote, IconExternal, IconCrosshair, IconReset, carGlyph,
});