<template>
  <div class="click-to-copy-field">
    <n-input
      :value="textContent"
      readonly
      :placeholder="placeholder"
      class="copy-input"
    >
      <template #suffix>
        <n-button
          quaternary
          size="small"
          @click="handleCopy"
          :loading="copying"
          class="copy-button"
        >
          <template #icon>
            <n-icon>
              <Icon :icon="copied ? 'tabler:check' : 'tabler:copy'" />
            </n-icon>
          </template>
        </n-button>
      </template>
    </n-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NInput, NButton, NIcon, useMessage } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { t } from '../i18n'

interface Props {
  textContent: string
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: ''
})

const message = useMessage()
const copying = ref(false)
const copied = ref(false)

const handleCopy = async () => {
  if (!props.textContent) return
  
  copying.value = true
  try {
    await navigator.clipboard.writeText(props.textContent)
    copied.value = true
    message.success(t('Copied to clipboard'))
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (error) {
    message.error(t('Copy failed'))
  } finally {
    copying.value = false
  }
}
</script>

<style scoped>
.click-to-copy-field {
  width: 100%;
}

.copy-input {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.copy-button {
  margin-right: 4px;
}
</style>
