import { s as script$1 } from './headerText-0fd3adc1.mjs';
import { s as script$2 } from './normalText-66005fcf.mjs';
import script$3 from './TsRatings.mjs';
import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, createTextVNode, toDisplayString, normalizeStyle } from 'vue';
import './TsIcon.mjs';

var script = {
    components: {
        TsHeaderText: script$1,
        TsNormalText: script$2,
        TsRatings: script$3,
    },
    props: {
        ratings: {
            type: Array,
            required: true,
        },
    },
    name: "TsRatingBox",
};

const _hoisted_1 = { class: "w-full items-start flex flex-row mdlg:!py-5 mdlg:!px-5 px-2 py-3 space-x-2 border-[1px] border-gray-200 rounded" };
const _hoisted_2 = { class: "flex flex-col space-y-2 items-center h-full justify-center mdlg:!px-8 px-4 py-4 border-r-[1px] border-gray-200" };
const _hoisted_3 = /*#__PURE__*/createTextVNode(" 5.0 ");
const _hoisted_4 = /*#__PURE__*/createTextVNode(" 14 reviews ");
const _hoisted_5 = { class: "flex flex-col space-y-3 flex-grow mdlg:!px-4 px-2" };
const _hoisted_6 = { class: "flex-grow flex relative rounded mdlg:!h-[6px] h-[6px] bg-slate-200" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_header_text = resolveComponent("ts-header-text");
  const _component_ts_ratings = resolveComponent("ts-ratings");
  const _component_ts_normal_text = resolveComponent("ts-normal-text");

  return (openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", _hoisted_2, [
      createVNode(_component_ts_header_text, { size: 'lg' }, {
        default: withCtx(() => [
          _hoisted_3
        ]),
        _: 1 /* STABLE */
      }),
      createVNode(_component_ts_ratings, { size: 'mdlg:!h-[18px] h-[14px]' }),
      createVNode(_component_ts_normal_text, null, {
        default: withCtx(() => [
          _hoisted_4
        ]),
        _: 1 /* STABLE */
      })
    ]),
    createElementVNode("div", _hoisted_5, [
      (openBlock(true), createElementBlock(Fragment, null, renderList($props.ratings, (rating, index) => {
        return (openBlock(), createElementBlock("div", {
          class: "flex flex-row items-center mdlg:!space-x-4 space-x-2",
          key: index
        }, [
          createVNode(_component_ts_normal_text, {
            customClass: `text-xs ${
            rating.percentage == 0 ? 'text-paragraphTextLight' : ''
          }`
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(rating.name), 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["customClass"]),
          createElementVNode("span", _hoisted_6, [
            createElementVNode("span", {
              class: "absolute h-full rounded bg-primaryYellow",
              style: normalizeStyle(`width: ${rating.percentage}%;`)
            }, null, 4 /* STYLE */)
          ]),
          createVNode(_component_ts_normal_text, {
            customClass: `text-xs ${
            rating.percentage == 0 ? 'text-paragraphTextLight' : ''
          }`
          }, {
            default: withCtx(() => [
              createTextVNode(" (" + toDisplayString(rating.count) + ") ", 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["customClass"])
        ]))
      }), 128 /* KEYED_FRAGMENT */))
    ])
  ]))
}

script.render = render;
script.__file = "src/components/TsRatingBox/index.vue";

export { script as default };
