<template>
  <v-row no-gutters class="widget-type" align="center" @click="add()">
    <v-icon x-large color="#B0B7BB">{{ icon }}</v-icon>
    <v-spacer class="flex-grow-0 mr-3" />
    <v-col style="text-align: start; align-items: center">
      <p
        class="ma-0"
        style="font-size: 17px; font-weight: bold; color: #3c3d3c"
      >
        {{ name }}
      </p>
      <p class="p-h ma-0" style="color: #b0b7bb">Insert description here</p>
    </v-col>
    <v-icon color="blue">mdi-plus-circle-outline</v-icon>
  </v-row>
</template>

<script>
export default {
  name: "WidgetTypeButton",
  props: ["name", "icon", "secondIcon"],
  methods: {
    add() {
      this.$emit("add");
    },
  },
};
</script>

<style>
.widget-type {
  padding: 15px 20px;
  width: 100%;
  background: #fff;
  /*border-radius: 6px;*/
  /*border: 1px solid #ddd;*/
  cursor: pointer;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  color: #505659;
  text-align: center;
}
</style>
