<!-- Сетка карточек моделей с ленивой гидрацией (первые 6 eager) -->
<template>
  <div
    :class="{'--footer': footer}"
    class="grid-models"
  >
    <CardModel
      v-for="(item, index) in items"
      :key="`model-card-${item.guid}`"
      :card="item"
      :loading="index > 5 ? 'lazy' : 'eager'"
      :priority="priority && index === 0"
      class="grid-models__item"
    />
  </div>
</template>

<script setup lang="ts">
import type { IModelCard } from '../../types';

defineProps<{
  items: IModelCard[]
  footer?: boolean
  priority?: boolean
}>();
</script>

<style lang="scss">
.grid-models {
  --min-width: 280px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-width) ,1fr));
  gap: 12px;

  @include from-br(sm) {
    --min-width: 320px;
  }
}
</style>
