<template>
  <span :class="timerClasses">
    {{ formattedTime }}
  </span>
</template>

<script setup>
import { computed } from 'vue';
import { formatTime } from '../utils/timeFormatter';

const props = defineProps({
  seconds: {
    type: Number,
    required: true
  },
  isPulsating: Boolean, // For active timer
  isNegative: Boolean, // For negative time text color
});

const formattedTime = computed(() => formatTime(props.seconds));

const timerClasses = computed(() => ({
  'font-mono text-5xl md:text-7xl lg:text-8xl font-bold': true,
  'text-red-500 dark:text-red-400': props.isNegative,
  'animate-pulseNegative': props.isNegative && props.isPulsating, // Pulsate text if negative and active
}));
</script>