<template>
  <div class="campaign-duration">
    <div class="title">Campaign Duration</div>
    <div class="divider"></div>
    <div class="value">
      <img v-lazy="clockIcon" width="16" height="16" />
      <span>{{ value }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import clockIcon from '@/assets/img/static-icons/clock-2.svg?url';

export default defineComponent({
  props: {
    value: {
      type: String,
      required: true,
    },
  },

  data: () => ({
    clockIcon,
  }),
});
</script>

<style lang="scss" scoped>
.campaign-duration {
  align-self: end;
  width: 100%;
  padding: 13px 13px 13px 20px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  //
  //@include media(tabletDraft) {
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  gap: 24px;
  //  width: 100%;
  //  padding: 20px 24px;
  //
  //  text-align: center;
  //}
}

.title {
  margin-bottom: 6px;

  color: #b1b2b4;
  font-size: 10px;
  line-height: 130%;

  //=
  //  @include media(tabletDraft) {
  //    margin-bottom: 0;
  //
  //    font-weight: 400;
  //    font-size: 16px;
  //    line-height: 180%;
  //  }
}

.divider {
  display: none;

  //@include media(tabletDraft) {
  //  display: block;
  //  width: 1px;
  //  height: 32px;
  //  margin: 0 10px;
  //
  //  background-color: #3c3d3e;
  //}
}

.value {
  display: flex;
  align-items: center;

  color: #ffffff;

  font-weight: 800;
  font-size: 16px;
  line-height: 130%;
  text-transform: uppercase;
  column-gap: 10px;
}
</style>
