<template>
  <div class="series-badge p-4">
    <div class="flex items-start justify-between gap-6">
      <div class="flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-2 mb-2">
          <span class="series-badge__label text-sm font-semibold">
            Part of a Series
          </span>
          <span
            v-if="totalEvents"
            class="series-badge__count inline-flex items-center px-2 py-0.5 text-sm font-medium"
          >
            <template v-if="position">
              Event {{ position }} of {{ totalEvents }}
            </template>
            <template v-else> {{ totalEvents }} events in series </template>
          </span>
        </div>
        <h3 class="series-badge__title text-lg font-semibold mb-2">
          {{ title }}
        </h3>
        <p v-if="description" class="series-badge__description text-sm">
          {{ description }}
        </p>
      </div>
      <div v-if="seriesId" class="flex-shrink-0 self-start">
        <UButton
          :to="`/series/${seriesId}`"
          color="primary"
          size="md"
          label="View Series"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: "",
  },
  position: {
    type: Number,
    default: null,
  },
  totalEvents: {
    type: Number,
    default: null,
  },
  seriesId: {
    type: String,
    required: true,
  },
});
</script>

<style scoped>
.series-badge {
  background: var(--surface);
  border: 1px dashed var(--border);
}
.series-badge__label {
  color: var(--text-dim);
}
.series-badge__count {
  background: color-mix(in srgb, var(--candle) 12%, transparent);
  color: var(--text);
}
.series-badge__title {
  color: var(--text-bright);
}
.series-badge__description {
  color: var(--text-dim);
}
</style>
