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

<script>

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

export default {
  name: "AppGroupItem",
  components: {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>

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

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

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



</style>