// icons.jsx — cute rounded glyph set for Our Little Ledger
// Each icon is a 24x24 path drawn with round caps/joins, uses currentColor.
// <Icon name="travel" size={22} /> renders the glyph.
// <IconBadge name color size /> renders it on a soft tinted circle.

const ICON_PATHS = {
  travel:   <path d="M3 13.5l8-1.2 4.2-7c.4-.7 1.5-.6 1.8.2l1.3 4.2 2.6.9c.9.3.9 1.6 0 1.9l-2.6.9-1.3 4.2c-.3.8-1.4.9-1.8.2L11 12.7l-8-1.2c-.4 0-.4-.6 0-.7z" />,
  food:     <g><path d="M5 4v6c0 1.1.9 2 2 2v8M9 4v8M9 4v0M7 4v8" /><path d="M16 4c-1.5 0-2.5 2-2.5 5 0 2 1 3 2.5 3v8" /></g>,
  coffee:   <g><path d="M5 8h11v5a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8z" /><path d="M16 9h2a2 2 0 0 1 0 4h-2" /><path d="M8 3.5c-.4.6-.4 1.4 0 2M11.5 3.5c-.4.6-.4 1.4 0 2" /></g>,
  gift:     <g><path d="M4 11h16v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8z" /><path d="M3 7.5h18V11H3z" /><path d="M12 7.5v12.5M12 7.5C12 7.5 10.5 3.5 8.3 4c-1.8.4-1.4 3.5.8 3.5zM12 7.5c0 0 1.5-4 3.7-3.5 1.8.4 1.4 3.5-.8 3.5z" /></g>,
  shopping: <g><path d="M5 8h14l-1 11a1 1 0 0 1-1 .9H7a1 1 0 0 1-1-.9L5 8z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" /></g>,
  home:     <g><path d="M4 11l8-6.5L20 11" /><path d="M6 10v9.5h12V10" /><path d="M10.5 19.5V14h3v5.5" /></g>,
  date:     <path d="M12 20s-7-4.4-7-9.3C5 7.9 7 6.3 9 6.3c1.6 0 2.6 1 3 1.9.4-.9 1.4-1.9 3-1.9 2 0 4 1.6 4 4.4C19 15.6 12 20 12 20z" />,
  coin:     <g><circle cx="12" cy="12" r="8" /><path d="M9.5 10c0-1 1-1.7 2.5-1.7s2.4.6 2.4 1.6M14.4 14c0 1-1 1.7-2.5 1.7s-2.4-.7-2.4-1.6M12 7v1.2M12 15.7V17" /></g>,
  ticket:   <g><path d="M4 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H6a2 2 0 0 1-2-2 2 2 0 0 0 0-4z" /><path d="M14 6.5v11" strokeDasharray="1.5 2.5" /></g>,
  transport:<g><path d="M5 16V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8" /><path d="M5 13h14M4 16h16v2.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V16z" /><circle cx="8" cy="17.7" r="0.4" fill="currentColor" /><circle cx="16" cy="17.7" r="0.4" fill="currentColor" /></g>,
  health:   <g><circle cx="12" cy="12" r="8" /><path d="M12 8.5v7M8.5 12h7" /></g>,
  study:    <g><path d="M4 7l8-3 8 3-8 3-8-3z" /><path d="M7 9v4.5c0 1.4 2.2 2.5 5 2.5s5-1.1 5-2.5V9" /><path d="M20 7v5" /></g>,
  camera:   <g><path d="M4 9a2 2 0 0 1 2-2h1l1-1.5h6L17 7h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9z" /><circle cx="12" cy="12.5" r="3" /></g>,
  music:    <g><path d="M9 18V6l10-2v12" /><circle cx="6.5" cy="18" r="2.5" /><circle cx="16.5" cy="16" r="2.5" /></g>,
  pet:      <g><circle cx="7" cy="9" r="1.6" /><circle cx="12" cy="7.5" r="1.6" /><circle cx="17" cy="9" r="1.6" /><path d="M8.5 15.5c0-2 1.6-3.5 3.5-3.5s3.5 1.5 3.5 3.5c0 1.6-1.3 2.3-3.5 2.3s-3.5-.7-3.5-2.3z" /></g>,
  game:     <g><path d="M7 8h10a4 4 0 0 1 4 4 3 3 0 0 1-5.2 2H8.2A3 3 0 0 1 3 12a4 4 0 0 1 4-4z" /><path d="M7.5 11v2M6.5 12h2M15.5 11.5v.01M17.5 12.5v.01" /></g>,
  cake:     <g><path d="M5 14a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5H5v-5z" /><path d="M5 16c1.2 0 1.2 1 2.3 1s1.2-1 2.3-1 1.2 1 2.4 1 1.2-1 2.3-1 1.2 1 2.4 1" /><path d="M12 12V9M9 12V9.5M15 12V9.5" /><circle cx="12" cy="6.5" r="0.6" fill="currentColor" /></g>,
  flower:   <g><circle cx="12" cy="12" r="2" /><path d="M12 10c0-2.5-1-4-1-4s2-.5 3 1.2C16 6 18 6.5 18 6.5s-.6 2-2.2 2.7C17.5 11 17 13 17 13M12 14c0 2.5 1 4 1 4s-2 .5-3-1.2C9 18 7 17.5 7 17.5s.6-2 2.2-2.7" /></g>,
  flight:   <path d="M2 13.5l8-1.2 4.2-7c.4-.7 1.5-.6 1.8.2l1.3 4.2 2.6.9c.9.3.9 1.6 0 1.9l-2.6.9-1.3 4.2c-.3.8-1.4.9-1.8.2L10 12.7l-8-1.2c-.4 0-.4-.6 0-.7z" />,
  star:     <path d="M12 4l2.3 4.8 5.2.7-3.8 3.6 1 5.2L12 16l-4.7 2.3 1-5.2L4.5 9.5l5.2-.7L12 4z" />,
  wallet:   <g><path d="M4 8a2 2 0 0 1 2-2h11a1 1 0 0 1 1 1v1" /><path d="M4 8v9a2 2 0 0 0 2 2h12a1 1 0 0 0 1-1v-3M4 8h15a1 1 0 0 1 1 1v3h-4a2 2 0 0 1 0-4h4" /></g>,
  bag:      <g><path d="M6 8h12l-1 11a1 1 0 0 1-1 .9H8a1 1 0 0 1-1-.9L6 8z" /><path d="M9 8V6.5a3 3 0 0 1 6 0V8" /><circle cx="12" cy="12.5" r="0.5" fill="currentColor" /></g>,
};

const ICON_NAMES = Object.keys(ICON_PATHS);

function Icon({ name, size = 22, stroke = 1.9, color }) {
  const content = ICON_PATHS[name] || ICON_PATHS.coin;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color || 'currentColor'} strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
      {content}
    </svg>
  );
}

// soft tinted circle badge (icon style 2 = filled soft circle)
function IconBadge({ name, color = '#EC6F9E', size = 42, radius }) {
  const r = radius != null ? radius : Math.round(size * 0.32);
  return (
    <div style={{
      width: size, height: size, borderRadius: r, flexShrink: 0,
      display: 'grid', placeItems: 'center',
      background: tint(color, 0.16), color,
    }}>
      <Icon name={name} size={Math.round(size * 0.52)} />
    </div>
  );
}

// mix a hex color toward white by amount t (0..1 = full white)
function tint(hex, keep) {
  const c = hex.replace('#', '');
  const n = parseInt(c.length === 3 ? c.split('').map(x => x + x).join('') : c, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  const mix = (v) => Math.round(255 - (255 - v) * keep);
  return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
}

Object.assign(window, { Icon, IconBadge, ICON_PATHS, ICON_NAMES, tint });