<template>
  <div class="step">
    <slot />

    <slot name="actions">
      <div class="step-buttons">
        <BmsButton
          v-if="previousLabel"
          data-test="previous-button"
          name="previous"
          type="secondary"
          @click="$emit('previous')"
        >
          {{ previousLabel }}
        </BmsButton>
        <BmsButton
          v-if="nextLabel"
          data-test="next-button"
          class=""
          name="submit"
          :disabled="!isValid"
          @click="$emit('next')"
        >
          {{ nextLabel }}
        </BmsButton>
      </div>
    </slot>
  </div>
</template>

<script setup lang="ts">
import BmsButton from '../button/BmsButton.vue';

interface Props {
  previousLabel?: string;
  nextLabel?: string;
  isValid?: boolean;
  stepLabel: string;
  stepComplete: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  previousLabel: 'Précédent',
  nextLabel: 'Suivant',
  isValid: true,
});

defineEmits(['previous', 'next']);
</script>

<style lang="scss" scoped>
.step {
  &-buttons {
    padding-top: 2em;
    display: flex;
    justify-content: flex-end;
    gap: 1em;
  }
}
</style>
