<template>
  <BasicModal
    title="جزئیات رد"
    title-en="Details for Rejection"
    width="95%"
    max-width="50rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ data, close }">
      <div class="reject-reason-details">
        <div class="reject-reason-details__grid">
          <div class="reject-reason-details__cell--full">
            <LineInfoBlock title="توضیحات" :desc="data?.user?.blockReason || '—'" />
          </div>
        </div>

        <div class="reject-reason-details__actions">
          <BaseButton text="بسیار خب" custom-class="reject-reason-details__btn" @click="close">
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'

defineOptions({ name: 'RejectReasonDetailsModal' })
</script>

<style lang="scss" scoped>
.reject-reason-details {
  width: 100%;
  text-align: start;

  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &__cell--full {
    grid-column: 1 / -1;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
  }

  &__btn {
    min-width: 12rem;
  }
}
</style>
