<script setup>
import { computed } from 'vue'

const props = defineProps({
  remaining: { type: Number, required: true },
  isPaused: { type: Boolean, default: false },
  pauseLabel: { type: String, default: 'Pause' },
  resumeLabel: { type: String, default: 'Resume' },
})

const emit = defineEmits(['toggle-pause'])

const formatted = computed(() => {
  const s = Math.max(0, props.remaining)
  const m = Math.floor(s / 60)
  const sec = s % 60
  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
})
</script>

<template>
  <div class="timer-display">
    <span class="timer-countdown" :class="{ 'timer-low': remaining > 0 && remaining < 10 }">
      {{ formatted }}
    </span>
    <button
      class="timer-pause-btn btn-primary"
      :aria-label="isPaused ? resumeLabel : pauseLabel"
      @click="emit('toggle-pause')"
    >
      <i :class="isPaused ? 'bi bi-play-fill' : 'bi bi-pause-fill'"></i>
      {{ isPaused ? resumeLabel : pauseLabel }}
    </button>
  </div>
</template>

<style scoped>
.timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.timer-countdown {
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-text);
  transition: color 0.3s;
}

.timer-low {
  color: var(--btn-danger-bg, #dc3545);
}

.timer-pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.15s;
}

.timer-pause-btn:hover {
  opacity: 0.8;
}
</style>
