<template>
  <div
    class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
  >
    <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 text-guild-300 dark:text-guild-300"
          >
            Part of a Series
          </span>
          <span
            v-if="totalEvents"
            class="series-badge__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
          >
            <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 text-guild-100 dark:text-guild-100 mb-2"
        >
          {{ title }}
        </h3>
        <p
          v-if="description"
          class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
        >
          {{ 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>
