<template>
  <div class="tour-card card">
    <div class="relative">
      <img 
        :src="tour.image" 
        :alt="tour.title"
        class="tour-card__image"
      >
      <div class="tour-card__badge">
        <span class="badge badge-primary">{{ tour.badge }}</span>
      </div>
    </div>
    
    <div class="card-body">
      <h3 class="font-semibold text-lg mb-2">{{ tour.title }}</h3>
      <p class="text-gray-600 mb-3">{{ tour.location }}</p>
      
      <div class="flex items-center justify-between mb-4">
        <div class="rating-stars">
          <span 
            v-for="star in 5" 
            :key="star"
            class="rating-star"
            :class="{ empty: star > Math.round(tour.rating) }"
          >
            ★
          </span>
          <span class="rating-value">{{ tour.rating }}</span>
        </div>
      </div>
      
      <div class="flex items-center justify-between">
        <div>
          <span class="tour-card__price">{{ formatPrice(tour.discountPrice || tour.price) }}</span>
          <span 
            v-if="tour.discountPrice"
            class="tour-card__discount ml-2"
          >
            {{ formatPrice(tour.price) }}
          </span>
        </div>
        <button class="btn btn-primary btn-sm">Подробнее</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Tour {
  id: number
  title: string
  location: string
  price: number
  discountPrice: number | null
  rating: number
  image: string
  badge: string
}

defineProps<{
  tour: Tour
}>()

const formatPrice = (price: number) => {
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
  }).format(price)
}
</script>