<template>
  <BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false">
    <template #default="{ data }">
      <div class="confirm-modal">
        <h3 class="confirm-modal__title">{{ data?.title || 'تأیید حذف' }}</h3>

        <div class="confirm-modal__message">
          <span v-if="data?.message" v-html="data.message" />
          <span v-else>این عمل غیرقابل بازگشت است. آیا از حذف اطمینان دارید؟</span>
        </div>

        <div class="confirm-modal__actions">
          <BaseButton
            variant="transparent"
            text="منصرف شدم"
            text-class=""
            custom-class="confirm-modal__btn confirm-modal__btn--cancel"
            @click="cancel(data)"
          />
          <BaseButton
            variant="primary"
            text="تایید"
            :loading="!!data?.confirmLoading"
            custom-class="confirm-modal__btn confirm-modal__btn--confirm"
            @click="confirm(data)"
          >
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import SvgIcon from './icons/SvgIcon.vue'
import { useModalStore } from '@/store/modal'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'

defineOptions({ name: 'ConfirmModal' })

const { closeModal } = useModalStore()

const confirm = (data) => {
  data?.onConfirm?.()
  if (!data?.keepOpenOnConfirm) closeModal('ConfirmModal')
}

const cancel = (data) => {
  data?.onCancel?.()
  closeModal('ConfirmModal')
}
</script>

<style lang="scss" scoped>
.confirm-modal {
  padding: 1.5rem;

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  &__message {
    margin-bottom: 1.5rem;
    font-family: var(--font-family-fa);
    text-align: center;

    :deep(p) {
      margin: 0;
    }
  }

  &__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  &__btn {
    min-width: 100px;
    padding: 0.5rem 1.5rem;
  }
}
</style>
