<template>
  <div class="doctor-figure" aria-label="医生助手">
    <div class="pr-label">{{ label }}</div>
    <div class="panel-idle">
      <img src="../assets/doctor-assistant.png" alt="医生助手" />
      <div class="panel-idle-name">医生助手</div>
      <div class="panel-idle-note">当前仅作为静态形象展示。语音与发送操作仍在中间输入区完成。</div>
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ label?: string }>(), { label: '空闲' });
</script>
<style scoped>
.doctor-figure {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pr-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 20px;
}

.panel-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.panel-idle img {
  width: 220px;
  height: auto;
  border-radius: 16px;
}

.panel-idle-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel-idle-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 240px;
  line-height: 1.5;
}
</style>
