import { g as g$1 } from './SvgIcon-YE_5uJaI.mjs';
import { u as Qt, _ as Ds } from './server.mjs';
import { useSSRContext, ref, mergeProps, unref, withCtx, createVNode, toDisplayString } from 'vue';
import { ssrRenderAttrs, ssrInterpolate, ssrRenderClass, ssrRenderComponent, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderList } from 'vue/server-renderer';
import { A, g } from './star-mqjJGHgV.mjs';

const $ = { __name: "ProductCard", __ssrInlineRender: true, props: { product: { type: Object, required: true } }, emits: ["removeWishlist", "addedToCart"], setup(s2, { emit: $2 }) {
  Qt().$axios;
  const _2 = ref(false), h = ref(false);
  return (e2, a2, $3, y) => {
    var w, F, E, T, z, S, j, k, A$1, I, L, D, P, C, B, O, W, q, J, M, R;
    const G = g$1, H = Ds;
    s2.product ? (a2(`<div${ssrRenderAttrs(mergeProps({ class: "relative h-full flex flex-col group", "data-aos": "zoom-in-up" }, y))}><div class="relative overflow-hidden bg-[#FAFAFA]">`), s2.product.is_new_arrival && (null == (w = s2.product.detail) ? undefined : w.in_stock) ? a2(`<span class="absolute start-2 top-2 z-10 !text-xs text-white py-1 px-2 bg-[#499F30]">${ssrInterpolate(e2.$t("TITLES.new"))}</span>`) : a2("<!---->"), s2.product.offer_price && (null == (F = s2.product.detail) ? undefined : F.in_stock) ? a2(`<div class="${ssrRenderClass([s2.product.is_new_arrival ? "start-14" : "start-2", "absolute top-2 z-10 bg-[#DB4444] px-2 py-1 !text-xs text-white animate-bounce-in"])}">${ssrInterpolate(s2.product.offer_price)}% ${ssrInterpolate(e2.$t("TITLES.off"))}</div>`) : a2("<!---->"), s2.product.is_trendy ? (a2('<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">'), a2(ssrRenderComponent(G, { name: "trending" }, null, $3)), a2(` ${ssrInterpolate(e2.$t("TITLES.trending"))}</div>`)) : a2("<!---->"), a2(`<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">`), s2.product.is_fave ? a2(ssrRenderComponent(G, { name: "fill-heart", class: "text-2xl transition-colors duration-500" }, null, $3)) : a2(ssrRenderComponent(G, { name: "heart", class: "text-2xl transition-colors [&_path]:!fill-primary duration-500" }, null, $3)), a2("</button>"), a2(ssrRenderComponent(H, { to: e2.localePath(`/product/${s2.product.id}?color=${null == (T = null == (E = s2.product.detail) ? undefined : E.color) ? undefined : T.id}&size=${null == (S = null == (z = s2.product.detail) ? undefined : z.size) ? undefined : S.id}`), class: "block relative z-0" }, { default: withCtx((t2, e3, l2, a3) => {
      var i2, o2;
      if (!e3) return [createVNode("img", { src: null == (o2 = s2.product.main_image) ? undefined : o2.media, alt: s2.product.title, class: "h-[220px] w-full object-cover transition duration-300 group-hover:scale-105" }, null, 8, ["src", "alt"])];
      e3(`<img${ssrRenderAttr("src", null == (i2 = s2.product.main_image) ? undefined : i2.media)}${ssrRenderAttr("alt", s2.product.title)} class="h-[220px] w-full object-cover transition duration-300 group-hover:scale-105"${a3}>`);
    }), _: 1 }, $3)), a2('</div><div class="p-2 flex-1 space-y-2 bg-[#FAFAFA] lg:p-3">'), !(null == (j = s2.product.detail) ? undefined : j.in_stock) || s2.product.best_seller ? (a2('<div class="flex items-center gap-2 justify-between">'), s2.product.best_seller ? a2(`<span class="font-medium !text-xs bg-[#FFF6D9] py-2 px-2 2xl:px-4 text-[#9F6913]">${ssrInterpolate(e2.$t("TITLES.bestSeller"))}</span>`) : a2("<!---->"), (null == (k = s2.product.detail) ? undefined : k.in_stock) ? a2("<!---->") : a2(`<span class="font-medium !text-xs text-[#E74924] py-2 px-2 2xl:px-4 bg-[#FFE1DA]">${ssrInterpolate(e2.$t("TITLES.outOfStock"))}</span>`), a2("</div>")) : a2("<!---->"), a2(ssrRenderComponent(H, { to: e2.localePath(`/product/${s2.product.id}?color=${null == (I = null == (A$1 = s2.product.detail) ? undefined : A$1.color) ? undefined : I.id}&size=${null == (D = null == (L = s2.product.detail) ? undefined : L.size) ? undefined : D.id}`), class: "block" }, { default: withCtx((t2, e3, l2, a3) => {
      var i2, o2;
      if (!e3) return [createVNode("h3", { class: "!text-sm lg:!text-base line-clamp-1 font-medium" }, toDisplayString(null == (o2 = s2.product) ? undefined : o2.title), 1)];
      e3(`<h3 class="!text-sm lg:!text-base line-clamp-1 font-medium"${a3}>${ssrInterpolate(null == (i2 = s2.product) ? undefined : i2.title)}</h3>`);
    }), _: 1 }, $3)), a2('<div class="flex items-center gap-2 justify-between"><div class="flex items-center gap-1.5"><div class="font-semibold !text-sm lg:!text-lg xl:!text-base 2xl:!text-lg">'), s2.product.offer_price ? a2(`<div class="flex items-center gap-1.5"><div class="flex items-center gap-1"><span class="!text-sm lg:!text-lg xl:!text-base 2xl:!text-lg">${ssrInterpolate(null == (B = s2.product.detail) ? undefined : B.price_after_offer)}</span><span class="text-[#606060] !text-sm">${ssrInterpolate(null == (O = s2.product.detail) ? undefined : O.currency)}</span></div><div class="text-primary line-through !text-sm flex items-center gap-1">${ssrInterpolate(null == (W = s2.product.detail) ? undefined : W.price)} <span class="text-[#606060] !text-xs">${ssrInterpolate(null == (q = s2.product.detail) ? undefined : q.currency)}</span></div></div>`) : a2(`<div class="flex items-center gap-1"><span class="!text-sm lg:!text-lg xl:!text-base 2xl:!text-lg">${ssrInterpolate(null == (P = s2.product.detail) ? undefined : P.price)}</span><span class="text-[#606060] !text-sm">${ssrInterpolate(null == (C = s2.product.detail) ? undefined : C.currency)}</span></div>`), a2(`</div></div><button class="${ssrRenderClass([s2.product.detail && (null == (J = s2.product.detail) ? undefined : J.in_stock) ? "" : "opacity-50 cursor-not-allowed", "rounded-full disabled:opacity-70 disabled:cursor-not-allowed disabled:bg-[#FDEFE4]/70 bg-[#FDEFE4] xl:p-1 2xl:p-2 p-1 lg:p-2 text-white transition hover:bg-opacity-90 hover:scale-105"])}"${ssrIncludeBooleanAttr(!s2.product.detail || !(null == (M = s2.product.detail) ? undefined : M.in_stock) || unref(h)) ? " disabled" : ""}>`), a2(ssrRenderComponent(G, { name: "cart", class: "text-2xl lg:scale-100 scale-[85%] xl:scale-[85%] 2xl:scale-100 transition-all duration-500 [&_path]:!fill-primary" }, null, $3)), a2('</button></div><div class="flex items-center gap-2"><!--[-->'), ssrRenderList(5, (t2) => {
      var e3;
      a2('<span class="flex items-center gap-1 transition duration-300 hover:scale-110">'), t2 <= Math.floor((null == (e3 = s2.product.detail) ? undefined : e3.rate_avg) || 0) ? a2(`<img${ssrRenderAttr("src", A)} alt="star" class="w-4 h-4">`) : a2(`<img${ssrRenderAttr("src", g)} alt="star" class="w-4 h-4">`), a2("</span>");
    }), a2(`<!--]--><span class="!text-sm font-semibold text-gray-500"> (${ssrInterpolate((null == (R = s2.product.detail) ? undefined : R.rate_avg) || 0)}) </span></div></div></div>`)) : a2("<!---->");
  };
} }, _ = $.setup;
$.setup = (t2, e2) => {
  const l2 = useSSRContext();
  return (l2.modules || (l2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductCard.vue"), _ ? _(t2, e2) : undefined;
};

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