<script setup>
const props = defineProps({
  control: { type: Object, required: true },
  color: { type: String, required: false, default: "primary" }
});
</script>

<template>
  <v-chip
    v-if="props.control.enabled.value"
    class="ml-2"
    density="compact"
    :color="props.color"
    variant="elevated"
  >
    <v-icon
      size="small"
      start
    >
      mdi mdi-autorenew
    </v-icon>
    <span v-if="props.control.isLoading.value">—</span>
    <span v-else-if="!props.control.isActive.value">paused</span>
    <span v-else>{{ props.control.remainingSeconds.value }}s</span>
    <v-btn
      class="ml-1"
      density="compact"
      variant="text"
      size="x-small"
      :icon="props.control.isUserPaused.value ? 'mdi mdi-play' : 'mdi mdi-pause'"
      @click="props.control.togglePause"
    />
  </v-chip>
</template>
