<template>
  <div class="action-container">
    <template v-if="isEditing">
      <button v-if="needsEmailVerification" type="button" class="primary-btn" :disabled="saving" @click="emit('verify')">
        {{ t('Settings.buttons.verifyEmail') }}
      </button>
      <button v-else type="button" class="primary-btn" :disabled="saving" @click="emit('save')">
        {{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
      </button>
      <button type="button" class="secondary-btn" :disabled="saving" @click="emit('discard')">
        {{ t('Settings.buttons.discard') }}
      </button>
    </template>
    <template v-else>
      <button type="button" class="primary-btn edit-btn" @click="emit('edit')">
        {{ t('Settings.buttons.edit') }}
      </button>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

defineProps<{
  isEditing: boolean
  saving: boolean
  needsEmailVerification: boolean
}>()

const emit = defineEmits<{
  (event: 'edit'): void
  (event: 'save'): void
  (event: 'verify'): void
  (event: 'discard'): void
}>()

const { t } = useI18n()
</script>

<style lang="less" scoped>
.action-container {
  display: flex;
  justify-content: center;
  column-gap: 1.2rem;
  margin-top: 2.8rem;
}

.primary-btn,
.secondary-btn {
  height: 4.4rem;
  border: 0.1rem solid #c4c4c4;
  background: #f6f6f6;
  font-family: 'KaiseiOpti-Bold';
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: #232323;
  cursor: pointer;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.primary-btn {
  width: 23.6rem;
  padding: 0 2.4rem;
  border-color: #232323;
  background: #232323;
  color: #ffffff;
}

.secondary-btn {
  width: 12rem;
  background: #ffffff;
}
</style>
