<template>
  <BasicModal
    :title="`جزئیات ${data?.name ?? ''}`"
    title-en="Item Details"
    min-width="0"
    max-width="520px"
    width="92%"
  >
    <template #default="{ data, close }">
      <div class="item-details">
        <dl class="item-details__list">
          <div class="item-details__row">
            <dt>شناسه</dt>
            <dd>{{ data?.id }}</dd>
          </div>
          <div class="item-details__row">
            <dt>توضیحات</dt>
            <dd>{{ data?.description || '—' }}</dd>
          </div>
        </dl>
        <div class="item-details__actions">
          <BaseButton text="بستن" customClass="item-details__btn" @click="close" />
        </div>
      </div>
    </template>
  </BasicModal>
</template>

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

defineOptions({ name: 'ItemDetailsModal' })

const { getModal } = useModalStore()
const data = computed(() => getModal('ItemDetailsModal')?.data)
</script>

<style lang="scss" scoped>
.item-details {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: right;

  &__list {
    margin: 0;
    display: grid;
    gap: 0.5rem;
  }

  &__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;

    dt {
      font-family: var(--font-family-fa);
      font-size: 0.875rem;
      color: var(--color-prim-gray);
      margin: 0;
    }

    dd {
      font-family: var(--font-family-fa);
      font-size: 0.875rem;
      margin: 0;
    }
  }

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

  &__btn {
    width: 8rem;
  }
}
</style>
