<template>
  <div class="widget_type" @click="add()">
    <div style="width: 95px; height: 45px">
      <v-icon
        :style="{
          display: secondIcon != null ? 'inline' : 'block',
          fontSize: '40px',
        }"
        >{{ icon }}</v-icon
      >
      <v-icon
        v-if="secondIcon != null"
        :style="{
          display: secondIcon != null ? 'inline' : 'block',
          fontSize: '40px',
        }"
        >{{ secondIcon }}</v-icon
      >
    </div>

    <span style="font-size: 12px">{{ name }}</span>
  </div>
</template>

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

<style>
.widget_type {
  padding: 15px 0;
  width: 95px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  margin: 10px;
  float: left;
  cursor: pointer;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  color: #505659;
  text-align: center;
}
</style>
