<template>
  <div class="empty-state">
    <p class="empty-state__message">No events yet.<br />Create your first one!</p>
    <RouterLink to="/create" class="btn-primary empty-state__cta">+ Create Event</RouterLink>
  </div>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.empty-state__message {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-on-gradient);
  opacity: 0.9;
  text-align: center;
}

.empty-state__cta {
  max-width: 280px;
}
</style>
