Mini Music Player

---
/**
 * MusicPlayerMini — Compact player widget with controls and progress bar.
 * 
 * @param {string} title - The song track title.
 * @param {string} artist - The artist or band name.
 * @param {string} coverUrl - Optional string matching the album cover image URL.
 * @param {number} progress - The song progress representation (0 to 100). Default is 40.
 */
interface Props {
  title: string;
  artist: string;
  coverUrl?: string;
  progress?: number;
}

const { title, artist, coverUrl, progress = 40 } = Astro.props;
---

<div class="music-mini">
  <div class="music-mini__art" style={coverUrl ? `background-image: url('${coverUrl}'); background-size: cover;` : ''}></div>
  <div class="music-mini__track">
    <h4 class="music-mini__title">{title}</h4>
    <p class="music-mini__artist">{artist}</p>
    <div class="music-mini__progress" role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100">
      <div class="music-mini__bar" style={`width: ${progress}%;`}></div>
    </div>
  </div>
  <button class="music-mini__play" type="button" aria-label="Play track">▶</button>
</div>

<style>
  .music-mini { 
    display: flex; align-items: center; gap: var(--sp-4, 1rem); 
    background: var(--c-bg-elev, #111); 
    padding: var(--sp-3, 0.75rem); 
    border-radius: var(--r-md, 14px); border: 1px solid var(--c-border, #333); 
    width: 100%; max-width: 320px; 
  }
  .music-mini__art { 
    width: 50px; height: 50px; 
    background-color: var(--c-primary-light, #818cf8); 
    border-radius: var(--r-sm, 8px); flex-shrink: 0; 
  }
  .music-mini__track { flex: 1; }
  .music-mini__title { font-size: 0.85rem; color: var(--c-text-1, #fff); margin: 0; }
  .music-mini__artist { font-size: 0.7rem; color: var(--c-text-2, #64748b); margin: 0; }
  .music-mini__progress { 
    height: 3px; background: rgba(255,255,255,0.1); 
    border-radius: 2px; margin-top: 8px; position: relative; overflow: hidden;
  }
  .music-mini__bar { 
    position: absolute; left: 0; top: 0; height: 100%; 
    background: var(--c-primary, #6366f1); border-radius: 2px; 
  }
  .music-mini__play { 
    font-size: 1.2rem; cursor: pointer; color: var(--c-text-1, #fff); 
    background: none; border: none; padding: 0.25rem; display: grid; place-items: center;
  }
  .music-mini__play:hover { color: var(--c-primary-light, #818cf8); }
</style>