<!-- app/components/concert/ConcertCardList.vue -->
<template>
  <div
    class="concert-card-list"
    :class="{
      'concert-card-list--highlight-first': highlightFirst,
      'concert-card-list--limit-cards': limitCardsOnBreakpoint,
    }"
  >
    <slot />
  </div>
</template>

<script setup>
  defineProps({
    highlightFirst: { type: Boolean, default: true },
    limitCardsOnBreakpoint: { type: Boolean, default: true },
  })
</script>

<style lang="scss">
  .concert-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-cards);
    justify-content: center;
    .concert-card {
      max-width: 452px;
    }
  }

  // Afficher seulement 1 cards < 600px
  @media (max-width: 599px) {
    .concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(2) {
      display: none;
    }
    .concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(3) {
      display: none;
    }
  }

  // Afficher seulement 2 cards < 900px
  @media (max-width: 899px) {
    .concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(3) {
      display: none;
    }
  }

  // Taille des cards
  @media (max-width: 599px) {
    .concert-card-list > .concert-card {
      flex: 1 1 260px;
      max-width: 90%;
    }
  }
  @media (min-width: 600px) {
    .concert-card-list > .concert-card {
      flex: 1 1 260px;
    }
    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 280px;
    }
  }
  @media (min-width: 700px) {
    .concert-card-list > .concert-card {
      flex: 1 1 280px;
    }
    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 300px;
    }
  }
  @media (min-width: 800px) {
    .concert-card-list > .concert-card {
      flex: 1 1 280px;
    }
    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 300px;
    }
  }
  @media (min-width: 900px) {
    .concert-card-list > .concert-card {
      flex: 1 1 260px;
    }

    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 300px;
    }
  }

  @media (min-width: 1000px) {
    .concert-card-list > .concert-card {
      flex: 1 1 280px;
    }

    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 340px;
    }
  }

  @media (min-width: 1100px) {
    .concert-card-list > .concert-card {
      flex: 1 1 300px;
    }

    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 380px;
    }
  }

  @media (min-width: 1200px) {
    .concert-card-list > .concert-card {
      flex: 1 1 320px;
    }

    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 400px;
    }
  }

  @media (min-width: 1300px) {
    .concert-card-list > .concert-card {
      flex: 1 1 340px;
    }

    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 440px;
    }
  }

  @media (min-width: 1400px) {
    // style appliqué au composant enfant via sa classe
    .concert-card-list > .concert-card {
      flex: 1 1 360px;
    }
    //règle spécifique après la règle générale
    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
      flex: 2 1 480px;
    }
  }



</style>
