<template>
  <div
    class="snt-card"
    v-on="$listeners">
    <slot :attrs="{ icon, title, content }">
      <div class="snt-card__title">
        <v-icon
          v-if="icon"
          class="snt-card__icon">
          {{ icon }}
        </v-icon>
        {{ title }}
      </div>
      <div
        class="snt-card__content"
        v-html="content" />
    </slot>
  </div>
</template>

<script>

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

<style scoped>
  .snt-card {
    border: 1px solid #ddd;
  }
  .snt-card__title {
    display: flex;
    padding: 1em 1em 0;
    font-weight: 500;
    font-size: 16px;
  }
  .snt-card__icon {
    margin-right: 8px;
  }
  .snt-card__content {
    padding: 1em;
    font-size: 14px;
  }
</style>
