<template>
  <MapPanel>
    <template #header>
      <div class="flex items-center justify-between">
        <h3 class="font-semibold text-base text-base-content">{{ $t('catalog.headers.offers') }}</h3>
        <span class="badge badge-neutral">{{ offers.length }}</span>
      </div>
    </template>

    <!-- Content -->
    <div v-if="loading" class="flex items-center justify-center py-8">
      <span class="loading loading-spinner loading-md" />
    </div>

    <div v-else-if="offers.length === 0" class="text-center py-8 text-white/60">
      <Icon name="lucide:search-x" size="32" class="mb-2" />
      <p>{{ $t('catalog.empty.noOffers') }}</p>
    </div>

    <div v-else class="flex flex-col gap-3">
      <div
        v-for="offer in offers"
        :key="offer.uuid"
        class="cursor-pointer"
        @click="emit('select-offer', offer)"
      >
        <slot name="offer-card" :offer="offer">
          <OfferCard :offer="offer" linkable />
        </slot>
      </div>
    </div>
  </MapPanel>
</template>

<script setup lang="ts">
interface Offer {
  uuid: string
  [key: string]: any
}

defineProps<{
  loading: boolean
  offers: Offer[]
}>()

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