<template>
  <div class="grid grid-cols-5 gap-[15px] mb-[20px] select-none">
    <div class="bg-[#F5F7FA] box-border flex flex-col p-[16px] rounded-[12px]" v-for="item in channels" :key="item.id">
      <div class="flex items-center mb-[8px]">
        <img :src="item.icon" class="w-[24px] h-[24px] mr-[8px]">
        <span class="text-[16px] font-400 text-[#171717] leading-[24px]">
          {{ item.name }}
        </span>
      </div>
      <div class="text-[14px] font-400 text-[#171717] leading-[20px] mb-[4px]">
        {{ item.total }}条
      </div>
      <div class="flex items-center">
        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5"
          :key="i" />
        <span class="text-[14px] text-[#525866] leading-[20px] pl-[2px]">
          {{ item.score }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="RatePanelSection">
import { channels } from '@constant/rate'
import { RiStarFill } from '@remixicon/vue'
</script>