/* global React */
// Shared atoms: icons, avatar, skeleton, empty state.
(() => {
  const e = React.createElement;

  const icon = (path, vb = "0 0 24 24") => ({ size = 14, ...props }) =>
    e("svg", {
      width: size, height: size, viewBox: vb, fill: "none",
      stroke: "currentColor", strokeWidth: 2,
      strokeLinecap: "round", strokeLinejoin: "round", ...props,
    }, ...[].concat(path).map((d, i) => e("path", { key: i, d })));

  const Icons = {
    Reply: icon("M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 8.5-8.5 8.38 8.38 0 0 1 8.5 8.5z"),
    Repost: icon(["M17 1l4 4-4 4", "M3 11V9a4 4 0 0 1 4-4h14", "M7 23l-4-4 4-4", "M21 13v2a4 4 0 0 1-4 4H3"]),
    Heart: icon("M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"),
    Eye: icon(["M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"]),
    Play: icon("M5 3l14 9-14 9V3z"),
    External: icon(["M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", "M15 3h6v6", "M10 14L21 3"]),
    Filter: icon("M22 3H2l8 9.46V19l4 2v-8.54L22 3z"),
    Check: icon("M20 6L9 17l-5-5"),
    Tweet: icon(["M4 4l7.2 9.4L4.6 20h2.2l5.4-5.4L16.8 20H20l-7.5-9.8L18.9 4h-2.2l-4.8 4.9L8.2 4H4z"]),
    Zap: icon("M13 2L3 14h9l-1 8 10-12h-9l1-8z"),
    Mic: icon(["M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z", "M19 10v2a7 7 0 0 1-14 0v-2", "M12 19v4"]),
    Sparkle: icon("M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2L12 3z"),
  };

  function Avatar({ src, name, size = 40 }) {
    const [failed, setFailed] = React.useState(false);
    if (!src || failed) {
      return e("div", { className: "avatar-fallback", style: { width: size, height: size } },
        (name || "?").slice(0, 1).toUpperCase());
    }
    return e("img", {
      className: "avatar", src, alt: "", width: size, height: size,
      loading: "lazy", onError: () => setFailed(true),
      style: { width: size, height: size },
    });
  }

  const SkeletonRow = () =>
    e("div", { className: "skel" },
      e("div", { className: "c" }),
      e("div", null,
        e("div", { className: "b l1" }),
        e("div", { className: "b l2" }),
        e("div", { className: "b l3" })));

  const Empty = ({ children }) =>
    e("div", { className: "empty" }, children || "// nothing in this window");

  Object.assign(window, { Icons, Avatar, SkeletonRow, Empty });
})();