<script lang="ts" setup>
import { useTimelineStore } from '@/store/TimelineStore';
import { useTrackStore } from '@/store/TrackStore';

const trackStore = useTrackStore();
const timeline = useTimelineStore();
</script>

<template>
  <div class="scene-wrapper">
    <div class="scene">
      <h3>
        Preview Scene
      </h3>
      <p>
        Track store status: {{ trackStore.status }}
      </p>
      <p>
        Current track: {{ trackStore.currentAudioTrackName }}
      </p>
      <p>
        Track status: {{ trackStore.audioTrackStatus }}
      </p>
      <p>
        Track progress: {{ trackStore.audioTrackProgress }}
      </p>
      <p>
        Playback status: {{ timeline.isPlaying }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.scene-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene {
  width: 480px;
  height: 160px;
  border: 5px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
