<template>
  <div class="voice-message" @click="playAudio">
    <div class="voice-icon">
      <span class="material-icons-round">{{ isPlaying ? 'pause' : 'play_arrow' }}</span>
    </div>
    <div class="voice-duration">{{ size }}s</div>
    <div class="voice-bar" :style="{ width: barWidth }"></div>
  </div>
  <audio ref="audioRef" :src="item" @ended="onAudioEnded" style="display: none;"></audio>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  item: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    default: 0
  },
  senderId: {
    type: [String, Number],
    default: ''
  }
})

const audioRef = ref(null)
const isPlaying = ref(false)

const barWidth = computed(() => {
  const minWidth = 60
  const maxWidth = 200
  const width = Math.min(maxWidth, minWidth + props.size * 5)
  return width + 'px'
})

function playAudio() {
  if (audioRef.value) {
    if (isPlaying.value) {
      audioRef.value.pause()
      isPlaying.value = false
    } else {
      audioRef.value.play()
      isPlaying.value = true
    }
  }
}

function onAudioEnded() {
  isPlaying.value = false
}
</script>

<style scoped>
.voice-message {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #e4f9f9;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.voice-message:hover {
  background-color: #d0f0f0;
}
.voice-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #03aba8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 10px;
}
.voice-duration {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}
.voice-bar {
  height: 4px;
  background: linear-gradient(90deg, #03aba8, #4fcacd);
  border-radius: 2px;
}
</style>
