<template>
  <div class="bg-noctune-orange rounded-xl p-4 border-2 border-black">
    <!-- Album Art & Info -->
    <div class="flex items-start gap-3 mb-4">
      <div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
        <!-- Waveform icon -->
        <svg class="w-12 h-8 text-white" viewBox="0 0 50 30">
          <rect x="2" y="10" width="3" height="10" fill="currentColor"/>
          <rect x="8" y="5" width="3" height="20" fill="currentColor"/>
          <rect x="14" y="8" width="3" height="14" fill="currentColor"/>
          <rect x="20" y="3" width="3" height="24" fill="currentColor"/>
          <rect x="26" y="7" width="3" height="16" fill="currentColor"/>
          <rect x="32" y="5" width="3" height="20" fill="currentColor"/>
          <rect x="38" y="9" width="3" height="12" fill="currentColor"/>
          <rect x="44" y="11" width="3" height="8" fill="currentColor"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <h4 class="font-bold text-sm text-black truncate">No. 1 Party Anthem</h4>
        <p class="text-xs text-black/70">Arctic Monkeys</p>
      </div>
    </div>
    
    <!-- Progress Bar -->
    <div class="mb-3">
      <input 
        type="range" 
        :value="progress" 
        @input="updateProgress"
        min="0" 
        max="100" 
        class="w-full h-1.5 bg-black/30 rounded-full appearance-none cursor-pointer"
      />
      <div class="flex justify-between text-xs text-black mt-1">
        <span>1:30</span>
        <span>3:00</span>
      </div>
    </div>
    
    <!-- Controls -->
    <div class="flex items-center justify-center gap-6">
      <button class="text-black hover:opacity-70 transition-opacity">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
        </svg>
      </button>
      <button class="w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black hover:bg-yellow-400 transition-colors">
        <svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </button>
      <button class="text-black hover:opacity-70 transition-opacity">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
        </svg>
      </button>
    </div>
  </div>
</template>

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

const progress = ref(50)

const updateProgress = (e) => {
  progress.value = e.target.value
}
</script>

<style scoped>
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a1a1a;
  cursor: pointer;
}
</style>
