import { defineComponent, resolveDirective, mergeProps, unref, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrGetDirectiveProps, ssrInterpolate, ssrRenderAttr, ssrRenderComponent } from 'vue/server-renderer';
import { e as empty_user } from './empty_user-DSxcM_ac.mjs';
import { u as useRouter$1, a as useConfigStore } from './server.mjs';
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';

const _imports_0 = "data:image/svg+xml,%3csvg%20fill='white'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24px'%20height='24px'%3e%3cpath%20d='M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z%20M16,13h-3v3c0,0.552-0.448,1-1,1h0%20c-0.552,0-1-0.448-1-1v-3H8c-0.552,0-1-0.448-1-1v0c0-0.552,0.448-1,1-1h3V8c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v3h3%20c0.552,0,1,0.448,1,1v0C17,12.552,16.552,13,16,13z'/%3e%3c/svg%3e";
const _imports_1 = "data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24px'%20height='24px'%3e%3cpath%20d='M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z%20M16,13h-3v3c0,0.552-0.448,1-1,1h0%20c-0.552,0-1-0.448-1-1v-3H8c-0.552,0-1-0.448-1-1v0c0-0.552,0.448-1,1-1h3V8c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v3h3%20c0.552,0,1,0.448,1,1v0C17,12.552,16.552,13,16,13z'/%3e%3c/svg%3e";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "add2",
  __ssrInlineRender: true,
  setup(__props) {
    const config = useConfigStore();
    return (_ctx, _push, _parent, _attrs) => {
      if (unref(config).isNightStore) {
        _push(`<img${ssrRenderAttrs(mergeProps({
          src: _imports_0,
          alt: "comment",
          "cursor-pointer": ""
        }, _attrs))}>`);
      } else {
        _push(`<img${ssrRenderAttrs(mergeProps({
          src: _imports_1,
          alt: "comment",
          "cursor-pointer": ""
        }, _attrs))}>`);
      }
    };
  }
});
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("assets/img/icons/add2.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "UserProfilePic",
  __ssrInlineRender: true,
  props: {
    width: { default: 80 },
    src: { default: empty_user },
    seenStory: { type: Boolean, default: false },
    justShowProfile: { type: Boolean },
    showAdd: { type: Boolean, default: false }
  },
  setup(__props) {
    const router = useRouter$1();
    const props = __props;
    const config = useConfigStore();
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_lazy = resolveDirective("lazy");
      let _temp0;
      _push(`<div${ssrRenderAttrs(mergeProps({
        class: "circle",
        style: { width: props.width + "px", height: props.width + "px" }
      }, _attrs))} data-v-c61670c3><img${ssrRenderAttrs(_temp0 = mergeProps({
        alt: "instagram",
        class: "story_img object-cover"
      }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(props.src), loading: unref(empty_user), error: unref(empty_user) })))} data-v-c61670c3>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}`);
      if (!_ctx.justShowProfile) {
        _push(`<!--[-->`);
        if (_ctx.seenStory) {
          _push(`<svg viewBox="0 0 100 100" data-v-c61670c3><defs data-v-c61670c3><linearGradient id="gradient-id" gradientTransform="rotate(45)" data-v-c61670c3><stop offset="0%" stop-color="lightgray" data-v-c61670c3></stop></linearGradient></defs><circle cx="50" cy="50" r="48" fill="none" stroke="url(#gradient-id)" stroke-width="4" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="0" data-v-c61670c3></circle></svg>`);
        } else {
          _push(`<svg class="non-select"${ssrRenderAttr("width", `${props.width}`)}${ssrRenderAttr("height", props.width)} viewBox="0 0 100 100" data-v-c61670c3><defs data-v-c61670c3><linearGradient id="gradient-id" gradientTransform="rotate(45)" data-v-c61670c3><stop offset="0%" stop-color="#f09433" data-v-c61670c3></stop><stop offset="25%" stop-color="#e6683c" data-v-c61670c3></stop><stop offset="50%" stop-color="#dc2743" data-v-c61670c3></stop><stop offset="75%" stop-color="#cc2366" data-v-c61670c3></stop><stop offset="100%" stop-color="#bc1888" data-v-c61670c3></stop> 88/88 </linearGradient></defs><circle cx="50" cy="50" r="48" fill="none" stroke="url(#gradient-id)" stroke-width="4" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="0" data-v-c61670c3></circle></svg>`);
        }
        _push(`<!--]-->`);
      } else {
        _push(`<!---->`);
      }
      if (_ctx.showAdd) {
        _push(ssrRenderComponent(_sfc_main$1, {
          onClick: ($event) => unref(router).push({ name: "add-story" }),
          class: ["absolute top-50px border-1 border-solid rounded-full", [unref(config).isNightStore ? "bg-black border-black" : "bg-white border-white", unref(config).isRTL ? "-left-5px" : "-right-5px"]]
        }, null, _parent));
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/UserProfilePic.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const UserProfilePic = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main, [["__scopeId", "data-v-c61670c3"]]), { __name: "UserProfilePic" });

export { UserProfilePic as U };