<template>
  <div
    class="p-4 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl border border-purple-500/30"
  >
    <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="text-sm font-semibold text-purple-700 dark:text-purple-300"
          >
            Part of a Series
          </span>
          <span
            v-if="totalEvents"
            class="inline-flex items-center px-2 py-0.5 rounded-md bg-purple-500/20 text-sm font-medium text-purple-700 dark:text-purple-300"
          >
            <template v-if="position">
              Event {{ position }} of {{ totalEvents }}
            </template>
            <template v-else>
              {{ totalEvents }} events in series
            </template>
          </span>
        </div>
        <h3
          class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2"
        >
          {{ title }}
        </h3>
        <p
          v-if="description"
          class="text-sm text-purple-600 dark:text-purple-400"
        >
          {{ 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>
