<script lang="ts">
  import { songPlayerStore, currentTimeStore, togglePlay } from '$lib/stores/songPlayer';

  export let hash: string;
  export let preferBeatLeader = false;

  let isCurrent = false;
  $: isCurrent = $songPlayerStore?.currentHash === hash;
  $: currentTime = isCurrent ? $currentTimeStore : 0;

  function onToggle() {
    togglePlay(hash, preferBeatLeader);
  }
</script>

<div class="player">
  <button class="play" on:click={onToggle} aria-label="Play/Pause">
    {#if isCurrent && $songPlayerStore?.playing}
      ❚❚
    {:else}
      ▶
    {/if}
  </button>
  <div class="timeline" title="Progress">
    <div class="progress" style="width: {($songPlayerStore?.currentHash ? (currentTime / ($songPlayerStore?.duration || 1)) : 0) * 100}%"></div>
  </div>
  <slot />
</div>

<style>
  .player { display: flex; align-items: center; gap: 0.5rem; }
  .play { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: transparent; color: white; cursor: pointer; }
  .timeline { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
  .progress { height: 100%; background: rgba(255,255,255,0.6); }
</style>


