<template>
  <v-row
    class="action-row ma-0 pa-0"
    no-gutters
    align-content="center"
    v-on="$listeners"
  >
    <v-col cols="auto" class="me-2 align-self-center">
      <v-icon :size="iconSize">{{ icon }}</v-icon>
    </v-col>
    <v-col class="align-self-center">{{ text }}</v-col>
    <v-col cols="auto" v-if="$slots.default"><slot/></v-col>
  </v-row>
</template>

<script>
export default {
  name: "ActionRow",
  props: {
    icon: {
      type: String,
      default: function () {
        return null;
      },
    },
    iconSize: {
      type: Number,
      default: function() {
        return 22;
      }
    },
    text: {
      type: String,
      default: function () {
        return "";
      },
    },
  }
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>