<template>
  <GnModal
    :open="props.open"
    title="API Key Created"
    @update:open="emit('close')"
  >
    <div class="show-token-body">
      <p class="show-token-warning">
        <i class="ph ph-warning-circle"></i>
        Copy this token now — it will <strong>never be shown again</strong>.
      </p>
      <GnInputGroup>
        <code class="show-token-value">{{ props.token }}</code>
        <template #action>
          <GnCopyButton :text="props.token" label="Copy to clipboard" />
        </template>
      </GnInputGroup>
    </div>

    <template #actions>
      <GnButton variant="primary" @click="emit('close')">
        Done
      </GnButton>
    </template>
  </GnModal>
</template>

<script setup>
const props = defineProps({
  open: Boolean,
  token: String,
})

const emit = defineEmits(['close'])
</script>

<style scoped lang="scss">
.show-token-body {
  // Mobile: never wider than the viewport minus modal gutters
  min-width: min(420px, calc(100vw - 48px));
}

.show-token-warning {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--gn-color-warning);
  display: flex;
  align-items: center;
  gap: 6px;

  i {
    font-size: 1.1rem;
  }
}

.show-token-value {
  flex: 1 1 0;
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--gn-color-text-medium);
}
</style>