<script setup lang="ts">
import { messages } from '../lib/messages'
import SuggestionChips from './SuggestionChips.vue'

defineProps<{ suggestions: readonly string[] }>()
defineEmits<{ pick: [suggestion: string] }>()
</script>

<template>
  <div class="empty">
    <h1>
      {{ messages.emptyStateHeading
      }}<span class="accent">{{ messages.emptyStateHeadingAccent }}</span>
    </h1>
    <p class="lede">
      {{ messages.emptyStateDescription }}
    </p>
    <template v-if="suggestions.length">
      <div class="label">{{ messages.emptyStateSuggestionLabel }}</div>
      <SuggestionChips :suggestions="suggestions" @pick="$emit('pick', $event)" />
    </template>
  </div>
</template>

<style scoped>
.empty {
  padding: var(--s-5) 0 var(--s-3);
}

h1 {
  max-width: 16ch;
  margin: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

.accent {
  color: var(--c-accent);
}

.lede {
  max-width: 52ch;
  margin: 0 0 var(--s-9);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.label {
  margin-bottom: var(--s-5);
  color: var(--c-text-faint);
  font-family: var(--f-mono);
  font-size: var(--t-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

@media (max-width: 760px) {
  h1 {
    font-size: 38px;
  }
}

@media (max-width: 560px) {
  .empty {
    padding-top: var(--s-1);
  }

  h1 {
    font-size: 32px;
  }
}
</style>
