<template>
  <Section variant="plain" paddingY="md">
    <Stack gap="4">
      <Stack direction="row" align="center" justify="between">
        <Heading :level="2">{{ t('catalogOffersSection.header.title') }}</Heading>
        <NuxtLink
          :to="localePath('/catalog?select=product')"
          class="btn btn-sm btn-ghost"
        >
          <span>{{ t('catalogOffersSection.actions.view_all') }}</span>
          <Icon name="lucide:arrow-right" size="16" />
        </NuxtLink>
      </Stack>

      <Grid :cols="1" :md="2" :lg="3" :gap="4">
        <OfferCard
          v-for="(offer, index) in offers"
          :key="offer.uuid ?? index"
          :offer="offer"
        />
      </Grid>

      <Stack v-if="totalOffers > 0" direction="row" align="center" justify="between">
        <Text tone="muted">
          {{ t('common.pagination.showing', { shown: offers.length, total: totalOffers }) }}
        </Text>
        <Button v-if="canLoadMore" variant="outline" @click="loadMore">
          {{ t('common.actions.load_more') }}
        </Button>
      </Stack>

      <Stack v-if="offers.length === 0" align="center" gap="2">
        <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
      </Stack>
    </Stack>
  </Section>
</template>

<script setup lang="ts">
interface OfferLine {
  uuid?: string | null
  productName?: string | null
}

interface Offer {
  uuid?: string | null
  title?: string | null
  locationName?: string | null
  status?: string | null
  validUntil?: string | null
  lines?: (OfferLine | null)[] | null
}

const props = defineProps<{
  offers: Offer[]
  total?: number
  canLoadMore?: boolean
  onLoadMore?: () => void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const totalOffers = computed(() => props.total ?? props.offers.length)
const canLoadMore = computed(() => props.canLoadMore ?? false)
const loadMore = () => {
  props.onLoadMore?.()
}
</script>
