<template>
    <button
        class="flex items-center justify-center gap-2 text-sm font-semibold text-white transition"
        :class="[
            timerStore.isRunning
                ? 'bg-[#F18619] hover:bg-[#d97314]'
                : 'bg-primary-500 hover:bg-primary-600',
            collapsed ? 'mx-auto h-10 w-10 rounded-full' : 'w-full rounded-md px-4 py-2'
        ]"
        :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="collapsed ? '20' : '16'"
        />
        <span v-if="!collapsed" class="font-mono tracking-wide">
            {{ timerStore.elapsedFormatted }}
        </span>
    </button>
</template>

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

const timerStore = useTimerStore()
</script>
