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

const props = defineProps<{ tracks: TrackEvent[] }>()
const regionLabel = computed(() =>
  formatMessage(
    props.tracks.length === 1
      ? 'resultSetRecommendedTrackLabel'
      : 'resultSetRecommendedTracksLabel',
    { count: props.tracks.length },
  ),
)
</script>

<template>
  <div class="set" role="region" :aria-label="regionLabel" tabindex="0">
    <TrackCard
      v-for="(event, index) in tracks"
      :key="event.track.id"
      :event="event"
      :style="`--card-order: ${index}`"
    />
  </div>
</template>

<style scoped>
.set {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: min(42dvh, 480px);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border-block: 1px solid var(--c-line);
  scrollbar-color: var(--c-line-strong) transparent;
  scrollbar-width: thin;
}

@media (max-width: 560px) {
  .set {
    max-height: min(34dvh, 360px);
  }
}
</style>
