<template>
  <div class="itf-board-card-timer px-1 py-1">
    <div class="d-flex justify-content-between">
      <div class="d-flex align-items-center ps-2">
        <itf-icon name="clock" :size="16" class="me-1" />
        <slot>{{text}}</slot>
      </div>
      <div>
        <itf-button icon small>
          <itf-icon name="pause" />
        </itf-button>
      </div>
    </div>
  </div>
</template>
<style>
.itf-board-card-timer {
  background: var(--bs-primary);
  color: #fff;

  .btn {
    color: #fff;
  }
}
</style>
<script>
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button.vue';

export default @Component({
  components: {
    itfIcon,
    itfButton
  }
})
class BoardCardTimer extends Vue {
  @Prop() text;
}
</script>
