<template>
<div class="group-item">
  <tooltip :text="groupObj.group_description">
  <checkbox :checked="selected" @checkbox-changed="checkboxChanged"></checkbox>
  <div>
    <div class="group-item-name">{{ groupObj.group_name }}</div>
<!--    <div class="app-group-item-descr">{{ groupObj.group_description }}</div>-->
  </div>
  </tooltip>
</div>
</template>

<script>

import Checkbox from "@/components/UI/Checkbox.vue";
import Tooltip from "@/components/UI/Tooltip.vue";

export default {
  name: "GroupItem",
  components: {Tooltip, Checkbox},
  props: {
    groupObj: {
      type: Object,
      required: true
    },
    selected: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    checkboxChanged(checked) {
      this.$emit('checkbox-changed', checked, this.groupObj.group_name);
    }
  }
}
</script>

<style scoped>

.group-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;

}

.group-item-name {
  font-weight: 400;
  font-size: 1.4rem;
}

.app-group-item-descr {
  font-weight: 400;
  font-size: 1.4rem;
  color: #6b7280;
}



</style>