<template>
  <div class="info-box clickable" @click="$emit('click')">
    <span class="info-box-icon bg-blue elevation-1">
      <span class="info-box-icon">
        <svg-icon :icon-class="icon" />
      </span>
    </span>

    <div class="info-box-content">
      <span class="info-box-text">{{ title }}</span>
      <span class="info-box-number">
        {{ content }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>
