'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var headerText = require('./headerText-2eeecf55.js');
var normalText = require('./normalText-7b937f11.js');
var TsRatings = require('./TsRatings.js');
var vue = require('vue');
require('./TsIcon.js');

var script = {
    components: {
        TsHeaderText: headerText.script,
        TsNormalText: normalText.script,
        TsRatings: TsRatings["default"],
    },
    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__*/vue.createTextVNode(" 5.0 ");
const _hoisted_4 = /*#__PURE__*/vue.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 = vue.resolveComponent("ts-header-text");
  const _component_ts_ratings = vue.resolveComponent("ts-ratings");
  const _component_ts_normal_text = vue.resolveComponent("ts-normal-text");

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

exports["default"] = script;
