<template>
  <p v-if="groups && groups.length === 0">No groups</p>
  <div v-else class="container-bucket">
    <button v-on:click="onClick(group)" v-for="group in groups" :key="group.id" class="bucket">
      {{ group.name }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    groups: Array,
    onClick: Function
  }
}
</script>

<style scoped>
.container-bucket {
  display: flex;
  flex-wrap: wrap;
}

.bucket {
  cursor: pointer;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  margin: 15px;
  border: 1px solid #8c195f;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 30px;
}

.bucket:nth-child(1n) {
  background-color: rgb(220, 235, 236);
}

.bucket:nth-child(2n) {
  background-color: rgb(240, 231, 216);
}

.bucket:nth-child(3n) {
  background-color: rgb(240, 230, 229);
}
</style>
