<template>
    <div class="flex items-center gap-2">
        <button
            class="flex items-center justify-center rounded-full transition-colors"
            :class="timerStore.isRunning
                ? 'bg-red-500 hover:bg-red-600 text-white'
                : 'bg-green-500 hover:bg-green-600 text-white'"
            style="width: 32px; height: 32px;"
            :title="timerStore.isRunning ? 'Arrêter le timer' : 'Démarrer un timer'"
            @click="timerStore.isRunning ? timerStore.stop() : timerStore.start()"
        >
            <Icon
                :name="timerStore.isRunning ? 'mdi:stop' : 'mdi:play'"
                size="18"
            />
        </button>
        <span
            v-if="!collapsed"
            class="font-mono text-sm font-bold"
            :class="timerStore.isRunning ? 'text-white' : 'text-neutral-400'"
        >
            {{ timerStore.elapsedFormatted }}
        </span>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    collapsed: boolean
}>()

const timerStore = useTimerStore()
</script>
