webMontime/src/components/booking/BookingOrderSummary.vue

<template>
  <aside
    class="min-w-0 w-full max-w-full rounded-2xl border border-border bg-white p-4 shadow-[0_2px_12px_rgba(15,23,42,0.06)] dark:bg-surface sm:p-5"
  >
    <h2 class="mb-3 text-sm font-bold text-text sm:mb-4 sm:text-base">خلاصه سفارش</h2>

    <div v-if="items.length" class="space-y-3 sm:space-y-4">
      <p v-if="classTitle" class="text-xs font-medium text-brand-600">
        کلاس {{ classTitle }}
      </p>

      <div
        v-if="items.length === 1"
        class="overflow-hidden rounded-xl border border-border lg:block"
      >
        <div
          v-if="imageUrl"
          class="hidden aspect-[16/10] bg-surface-2 bg-cover bg-center lg:block"
          :style="{ backgroundImage: `url(${imageUrl})` }"
        />
        <div
          v-else
          class="hidden aspect-[16/10] items-center justify-center bg-brand-50 text-brand-600 dark:bg-brand-500/10 lg:flex"
        >
          <AppIcon name="spray" size="xl" />
        </div>
        <div class="p-3">
          <p class="font-semibold text-text">{{ items[0].title }}</p>
          <p v-if="items[0].durationLabel" class="mt-1 text-xs text-muted sm:text-sm">
            مدت زمان: {{ items[0].durationLabel }}
          </p>
        </div>
      </div>

      <ul v-else class="space-y-1.5 sm:space-y-2">
        <li
          v-for="item in items"
          :key="item.id"
          class="rounded-xl border border-border px-3 py-2 sm:py-2.5"
        >
          <div class="flex items-start justify-between gap-2 sm:gap-3">
            <div class="min-w-0 flex-1">
              <p class="truncate text-sm font-semibold text-text">{{ item.title }}</p>
              <p v-if="item.durationLabel" class="mt-0.5 text-xs text-muted">
                {{ item.durationLabel }}
              </p>
            </div>
            <p class="shrink-0 text-xs font-medium text-text sm:text-sm">
              {{ formatPriceToman(item.price) }}
            </p>
          </div>
        </li>
      </ul>

      <dl class="space-y-1.5 text-xs sm:space-y-2 sm:text-sm">
        <div
          v-if="items.length === 1"
          class="flex items-center justify-between gap-2"
        >
          <dt class="text-muted">قیمت خدمت</dt>
          <dd class="font-medium text-text">
            {{ formatPriceToman(items[0].price) }} تومان
          </dd>
        </div>
        <div
          v-if="totalDurationMinutes"
          class="flex items-center justify-between gap-2"
          :class="{ 'border-t border-border pt-2': items.length === 1 }"
        >
          <dt class="text-muted">مدت کل</dt>
          <dd class="font-medium text-text">{{ totalDurationMinutes }} دقیقه</dd>
        </div>
        <div class="flex items-center justify-between gap-2 border-t border-border pt-2">
          <dt class="font-semibold text-text">جمع کل</dt>
          <dd class="text-sm font-bold text-text sm:text-base">
            {{ formatPriceToman(totalPrice) }} تومان
          </dd>
        </div>
      </dl>

      <div
        v-if="earliestSlot"
        class="rounded-xl border border-brand-500/30 bg-brand-50 p-3 dark:bg-brand-500/10 sm:p-4"
      >
        <div class="flex items-start gap-2">
          <AppIcon name="zap" size="sm" class="mt-0.5 shrink-0 text-brand-600" />
          <div class="min-w-0 flex-1">
            <p class="text-xs font-medium text-brand-700 dark:text-brand-500">
              زودترین زمان خالی
            </p>
            <p class="mt-0.5 truncate text-sm font-bold text-text">
              {{ earliestSlot.dateLabel }}
            </p>
            <p class="text-xs text-muted sm:text-sm">{{ earliestSlot.timeLabel }}</p>
          </div>
        </div>
        <AppButton class="mt-2.5 sm:mt-3" @click="emit('select-earliest')">
          انتخاب این زمان
        </AppButton>
      </div>
    </div>

    <p v-else class="text-sm text-muted">ابتدا یک یا چند خدمت انتخاب کنید.</p>
  </aside>
</template>

<script setup lang="ts">
import AppButton from '@/components/ui/AppButton.vue';
import AppIcon from '@/components/ui/AppIcon.vue';
import { formatPriceToman } from '@/utils/format';

export type BookingSummaryItem = {
  id: string;
  title: string;
  price: string;
  durationLabel: string | null;
};

defineProps<{
  items: BookingSummaryItem[];
  classTitle?: string | null;
  totalPrice: string;
  totalDurationMinutes: number | null;
  imageUrl: string | null;
  earliestSlot: { dateLabel: string; timeLabel: string } | null;
}>();

const emit = defineEmits<{
  'select-earliest': [];
}>();
</script>