<template>
  <div
    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"
  >
    <div
      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"
    >
      <ts-header-text :size="'lg'"> 5.0 </ts-header-text>
      <ts-ratings :size="'mdlg:!h-[18px] h-[14px]'" />
      <ts-normal-text> 14 reviews </ts-normal-text>
    </div>

    <div class="flex flex-col space-y-3 flex-grow mdlg:!px-4 px-2">
      <div
        class="flex flex-row items-center mdlg:!space-x-4 space-x-2"
        v-for="(rating, index) in ratings"
        :key="index"
      >
        <ts-normal-text
          :customClass="`text-xs ${
            rating.percentage == 0 ? 'text-paragraphTextLight' : ''
          }`"
        >
          {{ rating.name }}
        </ts-normal-text>
        <span class="flex-grow flex relative rounded mdlg:!h-[6px] h-[6px] bg-slate-200">
          <span
            class="absolute h-full rounded bg-primaryYellow"
            :style="`width: ${rating.percentage}%;`"
          >
          </span>
        </span>
        <ts-normal-text
          :customClass="`text-xs ${
            rating.percentage == 0 ? 'text-paragraphTextLight' : ''
          }`"
        >
          ({{ rating.count }})
        </ts-normal-text>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import TsHeaderText from "../TsTypography/headerText.vue";
import TsNormalText from "../TsTypography/normalText.vue";
import TsRatings from "../TsRatings/index.vue";

export default {
  components: {
    TsHeaderText,
    TsNormalText,
    TsRatings,
  },
  props: {
    ratings: {
      type: Array,
      required: true,
    },
  },
  name: "TsRatingBox",
};
</script>
