<script setup lang="ts">
import type { Pharmacy } from '~/types/pharmacy'

defineProps<{ pharmacy: Pharmacy }>()
</script>

<template>
  <article class="pharmacy-card">
    <div class="pharmacy-cover">
      <img v-if="pharmacy.image_url" :src="pharmacy.image_url" :alt="pharmacy.name" loading="lazy">
      <div class="badge-row">
        <span v-if="pharmacy.is_featured" class="badge">ویژه</span>
        <span v-if="pharmacy.is_24h" class="badge">شبانه‌روزی</span>
        <span v-if="pharmacy.has_delivery" class="badge">ارسال</span>
      </div>
    </div>
    <div class="card-body">
      <h3>{{ pharmacy.name }}</h3>
      <div class="card-meta">📍 {{ pharmacy.city?.name }}<span v-if="pharmacy.district">، {{ pharmacy.district }}</span></div>
      <div class="card-meta">🕒 {{ pharmacy.working_hours || 'ساعت کاری ثبت نشده' }}</div>
      <p class="card-desc">{{ pharmacy.short_description || 'اطلاعات این داروخانه به‌زودی تکمیل می‌شود.' }}</p>
      <div class="services">
        <span v-if="pharmacy.has_supplements" class="service">مکمل</span>
        <span v-if="pharmacy.has_cosmetics" class="service">آرایشی‌بهداشتی</span>
        <span v-if="pharmacy.has_insurance" class="service">بیمه</span>
      </div>
      <div class="card-actions">
        <a v-if="pharmacy.phone" class="call-btn" :href="`tel:${pharmacy.phone}`">تماس</a>
        <span v-else class="call-btn">تماس</span>
        <NuxtLink class="detail-btn" :to="`/pharmacies/${pharmacy.slug}`">مشاهده صفحه</NuxtLink>
      </div>
    </div>
  </article>
</template>
