<template>
  <div :class="[gridClass, 'grid-example-container']">
    <div
      v-for="i in gridNumber"
      :key="i"
      :class="[gridItemClass, 'grid-example']"
    />
  </div>
</template>

<script>
/* eslint-disable vue/multi-word-component-names */
export default {
  name: 'Grid',
  props: {
    size: {
      type: String,
      default: 'sm',
    },
  },
  computed: {
    gridClass() {
      return `unnnic-grid-${this.size}`;
    },
    gridItemClass() {
      return 'unnnic-grid-span-1';
    },
    gridNumber() {
      if (this.size === 'xs' || this.size === 'sm') return 4;
      if (this.size === 'md') return 6;
      if (this.size === 'lg' || this.size === 'xl') return 12;
      return 12;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/assets/scss/unnnic' as *;

.grid-example {
  background-color: $unnnic-color-teal-8;

  &-container {
    background-color: $unnnic-color-fg-base;
    width: 100%;
    height: 100vh;
  }
}
</style>
