<template>
  <div class="text-shortener">
    <span
      class="text-shortener__text"
      @click="copyButton.copy()"
    >
      {{ shortenedText }}
    </span>

    <UiCopyButton
      ref="copyButton"
      :title="null"
      :pressed-title="null"
      :value="text"
    />
  </div>
</template>

<script setup>
const props = defineProps({ text: { type: String, required: true } })

const copyButton = ref()

const shortenedText = computed(() => {
  if (props.text.length > 12)
    return `${props.text.substr(0, 5)}....${props.text.substr(-5, 5)}`

  return props.text
})
</script>

<style lang="scss">
.text-shortener {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  &__text {
    @include txt-r-sb('text-shortener');

    cursor: pointer;
  }
}
</style>
