/* ui.jsx — zdieľané prvky: ikony (čiarové SVG z dizajnu), značka plus, avatar.
   Vystavuje window.Icon, window.PlusMark, window.Avatar, window.inicialy.
*/
(function () {
  "use strict";

  // Cesty ikon presne z dizajnu (artboardy Main / Mobile). Kreslia sa farbou currentColor.
  const IKONY = {
    tiket: <><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z" /><path d="M13 5v2M13 11v2M13 17v2" /></>,
    notebook: <><rect x="3" y="4" width="18" height="12" rx="2" /><path d="M2 20h20" /></>,
    auto: <><path d="M3 17v-4l2-5h14l2 5v4" /><path d="M3 13h18" /><circle cx="7" cy="17" r="2" /><circle cx="17" cy="17" r="2" /></>,
    sipka: <path d="M5 12h14M13 6l6 6-6 6" />,
    plus: <path d="M12 5v14M5 12h14" />,
    odhlasit: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5M21 12H9" /></>,
    stit: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" /><path d="m9 12 2 2 4-4" /></>,
    pozor: <><path d="M12 9v4M12 17h.01" /><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" /></>,
    hodiny: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    hladat: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    domov: <path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />,
    osoba: <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,
    hore: <path d="M12 19V5M5 12l7-7 7 7" />,
    dole: <path d="M12 5v14M19 12l-7 7-7-7" />,
    oko: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>,
    okoSkryte: <><path d="M3 3l18 18" /><path d="M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6" /><path d="M6.7 6.7C3.9 8.4 2 12 2 12s3.5 7 10 7a10 10 0 0 0 5.3-1.5" /><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" /></>,
    zavriet: <path d="M6 6l12 12M18 6 6 18" />,
    upravit: <><path d="M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3z" /><path d="m14 8 3 3" /></>,
  };

  function Icon({ name, size = 24, strokeWidth = 2, ...rest }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
        strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...rest}>
        {IKONY[name]}
      </svg>
    );
  }

  // Plný "plus" — opakujúci sa motív oboch značiek.
  function PlusMark({ size = 24, color = "#ef7c30", ...rest }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" {...rest}>
        <path d="M9 2h6v7h7v6h-7v7H9v-7H2V9h7z" fill={color} />
      </svg>
    );
  }

  function inicialy(meno) {
    const casti = String(meno || "").trim().split(/\s+/).filter(Boolean);
    if (casti.length === 0) return "?";
    const prve = casti[0][0];
    const posledne = casti.length > 1 ? casti[casti.length - 1][0] : "";
    return (prve + posledne).toUpperCase();
  }

  function Avatar({ meno, fotka, size = 36 }) {
    const style = { width: size, height: size };
    if (fotka) return <img className="avatar" src={fotka} alt="" style={style} />;
    return <span className="avatar" style={{ ...style, fontSize: Math.round(size * 0.39) }} aria-hidden="true">{inicialy(meno)}</span>;
  }

  Object.assign(window, { Icon, PlusMark, Avatar, inicialy });
})();