<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useCopy } from '../composables/useCopy';
import IconCopy from './icons/IconCopy.vue';
import IconCheck from './icons/IconCheck.vue';

// Bouton « copier » réutilisable, avec retour visuel (icône ✓ + label) pendant 1800 ms.
// Deux variantes :
//  - 'bar'  : bouton étiqueté intégré aux barres de commande (hero, CTA final).
//  - 'icon' : bouton compact icône seule, pour les blocs de code (étapes, footer).
withDefaults(
  defineProps<{
    text: string;
    variant?: 'bar' | 'icon';
    label?: string; // aria-label décrivant ce qui est copié
    barClass?: string; // padding/ajustements de la variante 'bar'
  }>(),
  { variant: 'bar', label: '', barClass: 'px-[15px]' },
);

const { t } = useI18n();
const { copied, copy } = useCopy();
</script>

<template>
  <button
    v-if="variant === 'bar'"
    type="button"
    :aria-label="label || t('copy')"
    :class="[
      'inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 font-mono text-[13px] font-semibold transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70',
      barClass,
      copied ? 'text-emerald-400' : 'text-zinc-300',
    ]"
    @click="copy(text)"
  >
    <component :is="copied ? IconCheck : IconCopy" :size="15" />
    <span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
  </button>

  <button
    v-else
    type="button"
    :aria-label="label || t('copy')"
    :title="copied ? t('copied') : label || t('copy')"
    :class="[
      'inline-flex flex-none items-center justify-center rounded-md border p-1.5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70',
      copied
        ? 'border-emerald-500/40 bg-zinc-800 text-emerald-400'
        : 'border-zinc-800 bg-zinc-900/80 text-zinc-400 hover:border-emerald-500/40 hover:bg-zinc-800 hover:text-emerald-400',
    ]"
    @click="copy(text)"
  >
    <component :is="copied ? IconCheck : IconCopy" :size="14" />
    <span aria-live="polite" class="sr-only">{{ copied ? t('copied') : t('copy') }}</span>
  </button>
</template>
