<template>
  <button
    class="save-btn"
    :class="{ 'save-btn--saving': saving, 'save-btn--saved': saved }"
    :disabled="saving"
    @click="$emit('save')"
  >
    <div v-if="saving" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
    <div v-else-if="saved" class="i-lucide-check h-4 w-4" />
    <div v-else class="i-lucide-save h-4 w-4" />
    {{ saving ? 'Sauvegarde...' : saved ? 'Sauvegardé' : 'Sauvegarder' }}
  </button>
</template>

<script setup lang="ts">
defineProps<{
  saving?: boolean
  saved?: boolean
}>()

defineEmits<{
  save: []
}>()
</script>

<style scoped>
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  background: hsl(12 76% 48%);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.save-btn:hover:not(:disabled) {
  background: hsl(12 76% 42%);
}

.save-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.save-btn--saved {
  background: hsl(140 50% 40%);
}
</style>
