<script setup>
import { ArrowRight, CalendarRange, Gift, Sparkles } from 'lucide-vue-next'
const ui = usePublicUi()

const props = defineProps({
  offer: {
    type: Object,
    required: true,
  },
  compact: {
    type: Boolean,
    default: false,
  },
})

const focusDateCard = computed(() => props.offer?.focusCards?.find((item) => item.id === 'dates') || null)
const promoCode = computed(() => props.offer?.bookingPrefill?.promoCode || '')
const relatedVehicle = computed(() => props.offer?.relatedVehicle?.name || '')
</script>

<template>
  <div
    v-if="compact"
    class="rounded-[1.5rem] border border-brand-orange/15 bg-[linear-gradient(135deg,#fff7ed_0%,#ffffff_55%,#fffaf5_100%)] px-4 py-3 shadow-[0_12px_30px_-24px_rgba(249,115,22,0.45)]"
  >
    <div class="flex items-start justify-between gap-3">
      <div class="min-w-0">
        <div class="inline-flex items-center gap-1.5 rounded-full bg-brand-orange/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.22em] text-brand-orange">
          <Sparkles class="w-3 h-3" />
          {{ ui.offers.offerLabel }}
        </div>

        <div class="mt-2 text-sm font-black tracking-tight text-slate-900 truncate">
          {{ offer.title }}
        </div>
      </div>

      <div class="shrink-0 inline-flex items-center rounded-full bg-brand-orange px-3 py-1.5 text-[11px] font-black uppercase tracking-[0.08em] text-white">
        {{ offer.discount }}
      </div>
    </div>

    <div class="mt-2 flex flex-wrap gap-2">
      <div
        v-if="promoCode"
        class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-600"
      >
        <Gift class="w-3 h-3 text-brand-orange" />
        {{ promoCode }}
      </div>

      <div
        v-if="focusDateCard?.value"
        class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-600"
      >
        <CalendarRange class="w-3 h-3 text-brand-orange" />
        {{ focusDateCard.value }}
      </div>
    </div>
  </div>

  <div
    v-else
    class="rounded-[2rem] border border-brand-orange/15 bg-[linear-gradient(135deg,#fff7ed_0%,#ffffff_38%,#fffaf5_100%)] shadow-[0_14px_40px_-28px_rgba(249,115,22,0.38)] p-5 md:p-6"
  >
    <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
      <div class="min-w-0">
        <div class="inline-flex items-center gap-2 rounded-full bg-brand-orange/10 px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.24em] text-brand-orange">
          <Sparkles class="w-3.5 h-3.5" />
          {{ ui.offers.offerAppliedLabel }}
        </div>

        <h3 class="mt-3 text-2xl md:text-[1.75rem] font-display font-black tracking-tight text-slate-900">
          {{ offer.title }}
        </h3>

        <p class="mt-2 text-slate-500 leading-relaxed max-w-3xl">
          {{ offer.description }}
        </p>
      </div>

      <div class="inline-flex shrink-0 items-center self-start rounded-full bg-brand-orange px-4 py-2.5 text-sm font-black uppercase tracking-[0.08em] text-white shadow-[0_18px_32px_-18px_rgba(249,115,22,0.7)]">
        {{ offer.discount }}
      </div>
    </div>

    <div class="mt-4 flex flex-wrap gap-2.5">
      <div
        v-if="relatedVehicle"
        class="inline-flex items-center rounded-full border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-600"
      >
        {{ relatedVehicle }}
      </div>

      <div
        v-if="focusDateCard?.value"
        class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-600"
      >
        <CalendarRange class="w-3.5 h-3.5 text-brand-orange" />
        {{ focusDateCard.value }}
      </div>

      <div
        v-if="promoCode"
        class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-600"
      >
        <Gift class="w-3.5 h-3.5 text-brand-orange" />
        {{ promoCode }}
      </div>
    </div>

    <div class="mt-4 flex items-center gap-2 text-sm font-medium text-slate-500">
      <ArrowRight class="w-4 h-4 text-brand-orange" />
      {{ ui.offers.activeInBookingFlow }}
    </div>
  </div>
</template>
