<script setup>
const props = defineProps({
  layout: {
    type: String,
    default: 'overview', // overview | sales | inventory | custom
  },
})
</script>

<template>
  <div class="bi-grid" :class="`bi-grid--${layout}`">
    <slot />
  </div>
</template>

<style scoped>
.bi-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

/* Desktop: 4 columns for overview, 3 for others */
.bi-grid--overview {
  grid-template-columns: repeat(3, 1fr);
}
.bi-grid--sales {
  grid-template-columns: repeat(3, 1fr);
}
.bi-grid--inventory {
  grid-template-columns: repeat(3, 1fr);
}
.bi-grid--custom {
  grid-template-columns: repeat(4, 1fr);
}

/* Large desktop */
@media (min-width: 1280px) {
  .bi-grid--overview {
    grid-template-columns: repeat(6, 1fr);
  }
  .bi-grid--custom {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet landscape */
@media (max-width: 1279px) and (min-width: 769px) {
  .bi-grid--overview,
  .bi-grid--custom {
    grid-template-columns: repeat(3, 1fr);
  }
  .bi-grid--sales,
  .bi-grid--inventory {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .bi-grid--overview,
  .bi-grid--sales,
  .bi-grid--inventory,
  .bi-grid--custom {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .bi-grid--overview,
  .bi-grid--sales,
  .bi-grid--inventory,
  .bi-grid--custom {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
</style>
