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

const props = defineProps<{ name: string; url: string | null; trackCount: number }>()
const metadata = computed(() => formatMessage('playlistSavedMetadata', { count: props.trackCount }))
</script>

<template>
  <div class="saved" role="status">
    <div>
      <div class="line">
        {{ messages.playlistSavedConfirmationPrefix }}<span class="name">{{ name }}</span>
      </div>
      <div class="meta">{{ metadata }}</div>
    </div>
    <a v-if="url" class="link" :href="url" target="_blank" rel="noreferrer">
      {{ messages.playlistSavedOpenSpotify }} <span aria-hidden="true">&nearr;</span>
    </a>
  </div>
</template>

<style scoped>
.saved {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--s-6);
  background: var(--c-saved-bg);
  border: 1px solid var(--c-saved-line);
  border-radius: var(--r-md);
  animation: save-pop var(--dur-playlist-saved) ease both;
}

.line {
  font-size: 14.5px;
}

.name,
.link {
  color: var(--c-saved);
}

.meta,
.link {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
}

.meta {
  margin-top: 2px;
  color: var(--c-text-faint);
}

@keyframes save-pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
</style>
