<script setup lang="ts">
import { NButton, NIcon } from 'naive-ui'

import { truncOcid } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'

const props = defineProps<{ ocid: string }>()

const message = useToast()

async function copy() {
  await navigator.clipboard.writeText(props.ocid)
  message.success('已复制 OCID')
}
</script>

<template>
  <span class="inline-flex min-w-0 items-center gap-1">
    <span class="mono truncate whitespace-nowrap" :title="ocid">{{ truncOcid(ocid) }}</span>
    <NButton size="tiny" quaternary aria-label="复制 OCID" @click="copy">
      <template #icon>
        <NIcon size="14">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="9" y="9" width="13" height="13" rx="2" />
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
          </svg>
        </NIcon>
      </template>
    </NButton>
  </span>
</template>
