<template>
  <div class="vm-card-grid" :style="gridStyle">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'vm-card-grid' })

const props = withDefaults(
  defineProps<{
    minWidth?: string
    gap?: string
  }>(),
  {
    minWidth: '280px',
    gap: '16px',
  },
)

const gridStyle = computed(() => ({
  '--vm-card-min': props.minWidth,
  '--vm-card-gap': props.gap,
}))
</script>

<style lang="scss" scoped>
.vm-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(var(--vm-card-min, 280px), 1fr));
  gap: var(--vm-card-gap, 16px);
  align-content: start;
}
</style>
