<script setup lang="ts">
// 연결 품질 막대(3/2/1칸) — good/medium/poor 단계에 따라 채워진 칸 수와 색이 달라진다.
import { computed } from 'vue'
import type { MeetingQuality } from '@/types/meeting'

interface Props {
  quality: MeetingQuality
  // 'tile'(다크 배경 위 반투명 칩) | 'bare'(배경 없이 막대만, 목록·상단바용)
  variant?: 'tile' | 'bare'
}
const props = withDefaults(defineProps<Props>(), { variant: 'tile' })

const level = computed(() =>
  props.quality === 'good' ? 3 : props.quality === 'medium' ? 2 : 1,
)
const label = computed(() =>
  props.quality === 'good'
    ? '원활'
    : props.quality === 'medium'
      ? '보통'
      : '불안정',
)
</script>

<template>
  <span
    class="qbars"
    :class="[`q-${quality}`, variant === 'bare' ? 'bare' : '']"
    :title="`연결 품질: ${label}`"
  >
    <i
      v-for="n in 3"
      :key="n"
      :class="{ on: n <= level }"
    />
  </span>
</template>

<style scoped>
.qbars {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.125rem;
  height: 0.8125rem;
  padding: 0.1875rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0.3125rem;
}
.qbars.bare {
  background: transparent;
  padding: 0;
}
.qbars i {
  width: 0.1875rem;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.32);
}
.qbars.bare i {
  background: #3a3f4a;
}
.qbars i:nth-child(1) {
  height: 0.25rem;
}
.qbars i:nth-child(2) {
  height: 0.4375rem;
}
.qbars i:nth-child(3) {
  height: 0.625rem;
}
.qbars.q-good i.on {
  background: var(--d-green);
}
.qbars.q-medium i.on {
  background: var(--d-amber);
}
.qbars.q-poor i.on {
  background: var(--d-red);
}
</style>
