import { g as g$1 } from './SvgIcon-DRvxO0-V.mjs';
import { a as useNuxtApp, _ as __nuxt_component_0$2 } from './server.mjs';
import { useSSRContext, ref, mergeProps, unref, withCtx, createVNode, toDisplayString } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderClass, ssrRenderList } from 'vue/server-renderer';
import { A, g } from './star-mqjJGHgV.mjs';

const $ = { __name: "ProductCard", __ssrInlineRender: true, props: { product: { type: Object, required: true } }, setup(a2) {
  useNuxtApp().$axios;
  const $2 = ref(false), h2 = ref(false);
  return (e2, i2, _, y) => {
    var w, F, E, T, j, S, k, z, A$1, I, D, L, P, B, C, O;
    const q = g$1, M = __nuxt_component_0$2;
    a2.product ? (i2(`<div${ssrRenderAttrs(mergeProps({ class: "relative h-full flex flex-col group", "data-aos": "fade-end", style: { animationDelay: 100 * a2.product.id + "ms" } }, y))}><div class="relative overflow-hidden bg-[#FAFAFA]">`), i2("<!---->"), a2.product.is_trendy ? (i2('<div class="absolute bottom-2 start-2 z-10 flex items-center gap-1 bg-[#000000B2] px-2.5 py-1.5 text-xs text-white">'), i2(ssrRenderComponent(q, { name: "trending" }, null, _)), i2(` ${ssrInterpolate(e2.$t("TITLES.trending"))}</div>`)) : i2("<!---->"), i2(`<button${ssrIncludeBooleanAttr(unref($2)) ? " disabled" : ""} class="absolute disabled:opacity-80 disabled:cursor-not-allowed end-3 top-3 z-[100] rounded-full bg-white p-1.5 transition hover:bg-gray-100">`), a2.product.is_fave ? i2(ssrRenderComponent(q, { name: "fill-heart", class: "text-2xl transition-colors duration-500" }, null, _)) : i2(ssrRenderComponent(q, { name: "heart", class: "text-2xl transition-colors [&_path]:!fill-primary duration-500" }, null, _)), i2("</button>"), i2(ssrRenderComponent(M, { to: e2.localePath(`/product/${a2.product.id}?color=${null == (F = null == (w = a2.product.detail) ? undefined : w.color) ? undefined : F.id}&size=${null == (T = null == (E = a2.product.detail) ? undefined : E.size) ? undefined : T.id}`), class: "block relative z-0" }, { default: withCtx((t2, e3, l2, i3) => {
      var s2, o2;
      if (!e3) return [createVNode("img", { src: null == (o2 = a2.product.main_image) ? undefined : o2.media, alt: a2.product.name, class: "h-[300px] w-full object-cover transition duration-300 group-hover:scale-105" }, null, 8, ["src", "alt"])];
      e3(`<img${ssrRenderAttr("src", null == (s2 = a2.product.main_image) ? undefined : s2.media)}${ssrRenderAttr("alt", a2.product.name)} class="h-[300px] w-full object-cover transition duration-300 group-hover:scale-105"${i3}>`);
    }), _: 1 }, _)), i2('</div><div class="py-3 flex-1 space-y-2 bg-[#FAFAFA] px-3">'), (null == (j = a2.product.detail) ? undefined : j.in_stock) ? i2("<!---->") : (i2('<div class="flex items-center gap-2 justify-between">'), i2("<!---->"), (null == (S = a2.product.detail) ? undefined : S.in_stock) ? i2("<!---->") : i2(`<span class="font-medium text-xs text-[#E74924] py-2 px-2 2xl:px-4 bg-[#FFE1DA]">${ssrInterpolate(e2.$t("TITLES.outOfStock"))}</span>`), i2("</div>")), i2(ssrRenderComponent(M, { to: e2.localePath(`/product/${a2.product.id}?color=${null == (z = null == (k = a2.product.detail) ? undefined : k.color) ? undefined : z.id}&size=${null == (I = null == (A$1 = a2.product.detail) ? undefined : A$1.size) ? undefined : I.id}`), class: "block" }, { default: withCtx((t2, e3, l2, i3) => {
      var s2, o2;
      if (!e3) return [createVNode("h3", { class: "text-base line-clamp-1 font-medium" }, toDisplayString(null == (o2 = a2.product) ? undefined : o2.title), 1)];
      e3(`<h3 class="text-base line-clamp-1 font-medium"${i3}>${ssrInterpolate(null == (s2 = a2.product) ? undefined : s2.title)}</h3>`);
    }), _: 1 }, _)), i2('<div class="flex items-center gap-2 justify-between"><div class="flex items-center gap-2"><div class="font-semibold text-xl">'), a2.product.offer_price ? i2(`<div class="flex items-center gap-2"><div class="flex items-center gap-2"><span>${ssrInterpolate(null == (L = a2.product.detail) ? undefined : L.price_after_offer)}</span><span class="text-[#606060] text-sm">${ssrInterpolate(e2.$t("TITLES.egp"))}</span></div><div class="text-primary line-through text-sm flex items-center gap-1">${ssrInterpolate(null == (P = a2.product.detail) ? undefined : P.price)} <span class="text-[#606060] text-xs">${ssrInterpolate(e2.$t("TITLES.egp"))}</span></div></div>`) : i2(`<p>${ssrInterpolate(null == (D = a2.product.detail) ? undefined : D.price)} <span class="text-[#606060] text-sm">${ssrInterpolate(e2.$t("TITLES.egp"))}</span></p>`), i2(`</div></div><button class="${ssrRenderClass([a2.product.detail && (null == (B = a2.product.detail) ? undefined : B.in_stock) ? "" : "opacity-50 cursor-not-allowed", "rounded-full disabled:opacity-70 disabled:cursor-not-allowed disabled:bg-[#FDEFE4]/70 bg-[#FDEFE4] p-2 text-white transition hover:bg-opacity-90 hover:scale-105"])}"${ssrIncludeBooleanAttr(!a2.product.detail || !(null == (C = a2.product.detail) ? undefined : C.in_stock) || unref(h2)) ? " disabled" : ""}>`), i2(ssrRenderComponent(q, { name: "cart", class: "text-2xl transition-all duration-500 [&_path]:!fill-primary" }, null, _)), i2('</button></div><div class="flex items-center gap-2"><!--[-->'), ssrRenderList(5, (t2) => {
      var e3;
      i2('<span class="flex items-center gap-1 cursor-pointer transition duration-300 hover:scale-110">'), t2 <= Math.floor((null == (e3 = a2.product.detail) ? undefined : e3.rate_avg) || 0) ? i2(`<img${ssrRenderAttr("src", A)} alt="star" class="w-4 h-4">`) : i2(`<img${ssrRenderAttr("src", g)} alt="star" class="w-4 h-4">`), i2("</span>");
    }), i2(`<!--]--><span class="text-sm font-semibold text-gray-500"> (${ssrInterpolate((null == (O = a2.product.detail) ? undefined : O.rate_avg) || 0)}) </span></div></div></div>`)) : i2("<!---->");
  };
} }, h = $.setup;
$.setup = (t2, e2) => {
  const l2 = useSSRContext();
  return (l2.modules || (l2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductCard.vue"), h ? h(t2, e2) : undefined;
};

export { $ };
//# sourceMappingURL=ProductCard-CR-Cc1Bx.mjs.map
