<template>
  <div class="settlement-page-header">
    <div class="settlement-page-heading">
      <span class="settlement-page-icon">
        <i :class="icon" />
      </span>
      <div class="settlement-page-title">
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
        <span v-if="endpoint" class="settlement-endpoint">{{ endpoint }}</span>
      </div>
    </div>
    <div v-if="$slots.actions" class="settlement-header-actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SettlementPageHeader',
  props: {
    icon: {
      type: String,
      default: 'el-icon-s-data'
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    endpoint: {
      type: String,
      default: ''
    }
  }
}
</script>
