<template>
  <div :class="{ error: !loading && !data.length }" class="grid">
    <!-- Loading placeholder -->
    <GridItemSkeleton v-if="loading" />
    <GridItemSkeleton v-if="loading" />

    <!-- Items -->
    <GridItem v-else :key="item.id" v-for="item in data" :item="item" />

    <!-- Error messages -->
    <p v-if="!loading && !data.length" class="alert"><b>💡 Restart API</b>: 0 fruits !</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
import GridItemSkeleton from "./GridItemSkeleton";

export default {
  name: "Grid",
  components: {
    GridItemSkeleton,
    GridItem: () => import("./GridItem")
  },
  props: {
    data: Array
  },
  computed: {
    ...mapState(["loading"])
  }
};
</script>

<style scoped lang="less">
.grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 1.5rem;

  &.error {
    display: block;
  }

  @media screen and (min-width: @md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: @lg) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media screen and (min-width: @xl) {
    grid-template-columns: repeat(4, 1fr);
  }

  .alert {
    box-sizing: border-box;
    margin: 0 auto;
    width: 80%;
    background-color: @color-3;
    color: @color-2;
    padding: 1rem 1.5rem;
    border-radius: 4px;

    @media screen and (min-width: @sm) {
      width: 50%;
      max-width: 535px;
    }

    pre {
      padding: 1rem;
      border-radius: 4px;
      background-color: rgb(45, 48, 55);

      span {
        color: @color-3;
      }
    }
  }
}
</style>
