<template>
  <div class="formatted-date">
    <p class="formatted-date__date">
      {{ date }} <span class="formatted-date__time">{{ time }}</span>
    </p>
    <p class="formatted-date__zone">
      (UTC+3)
    </p>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  value: { type: String, required: true },
})

const dayObj = computed(() => dayjs(props.value))
const date = computed(() => dayObj.value.format('DD.MM.YY'))
const time = computed(() => dayObj.value.format('HH:mm'))
</script>

<style lang="scss">
.formatted-date {
  &__date {
    @include txt-r-sb;

    color: $clr-black;
    white-space: nowrap;
  }

  &__time {
    color: $clr-grey-400;
  }

  &__zone {
    @include txt-s-m;

    color: $clr-grey-500;
    margin-top: 4px;
  }
}
</style>
