<script setup lang="ts">
import { Copy, Check } from "lucide-vue-next";

defineProps<{
  label: string;
  value: string;
  copied?: boolean;
}>();

defineEmits<{ (e: "copy"): void }>();
</script>

<template>
  <div
    class="flex items-start justify-between gap-4 rounded-lg border border-border bg-card p-4"
  >
    <div class="min-w-0 flex-1">
      <div class="text-xs uppercase tracking-wide text-muted-foreground">
        {{ label }}
      </div>
      <div class="mt-1 break-all font-mono text-sm">{{ value }}</div>
    </div>
    <button
      class="shrink-0 rounded-md border border-border p-2 hover:bg-secondary"
      :title="copied ? 'Copied' : 'Copy'"
      @click="$emit('copy')"
    >
      <Check v-if="copied" class="h-4 w-4 text-emerald-500" />
      <Copy v-else class="h-4 w-4" />
    </button>
  </div>
</template>
