<template>
  <div :class="[cn.b(), cn.is('expired', isPassed)]">
    <UiIconClock :class="cn.e('icon')" />

    <ClientOnly>
      <span :class="cn.e('time')">{{ formattedTime }}</span>

      <template #fallback>
        <span :class="cn.e('time')">--:--</span>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
const { expirationTime } = inject('public-invoice')

const cn = useClassname('invoice-form-timer')

const { isPassed, remainingTime } = useTimer(expirationTime)

const formattedTime = computed(() => {
  return new Date(remainingTime.value * 1000).toISOString().slice(14, 19)
})
</script>

<style lang="scss">
.invoice-form-timer {
  $self: &;

  display: flex;
  align-items: center;

  &__icon {
    color: $clr-grey-400;
    margin-right: 8px;

    #{$self}.is-expired & {
      color: $clr-red-500;
    }
  }

  &__time {
    @include txt-m-sb;

    color: $clr-grey-600;

    #{$self}.is-expired & {
      color: $clr-red-500;
    }
  }
}
</style>
