<template>
  <div class="room-group-widget">
    <group/>
    <span>
      {{ name }}
    </span>
  </div>
</template>

<script>
  import Group from '@/components/icons/Group.vue';

  export default {
    props: ['name'],

    components: {
      Group
    }
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .room-group-widget {
    display: flex;
    align-items: center;
    opacity: 0.6;

    svg {
      width: 30px;
      fill: $color-charcoal-dark;
      margin-right: 15px;
    }

    & > span {
      @include room-widget-text-style;;
    }
  }
</style>
