<template>
	<div v-if="currentTime && duration" class="root">
		<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
		<span>/</span>
		<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
	</div>
</template>

<script lang="ts">
import { formatTimer } from '../../utils/time.ts'
import { mapState } from 'pinia'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'Timer',
	computed: {
		...mapState(usePlayer, ['duration', 'currentTime']),
	},
	methods: {
		formatTimer,
	},
}
</script>

<style scoped>
.root {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: center;
}
</style>
