<script>
export default {
  props: {
    authenticated: { type: Boolean, default: false },
  },
};
</script>
<template>
  <div class="transferSummary">
    <div v-if="authenticated" class="authboxgreen">
      <font-awesome-icon
        id="auth"
        :icon="['fas', 'user-shield']"
        size="2xl"
        style="color: #45b408"
      />
      Customer Authenticated
    </div>
    <div v-else class="authboxred">
      <font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2xl" />
      Customer Not Authenticated
    </div>
  </div>
</template>
<style>
.authboxgreen,
.authboxred {
  margin: 8px;
  border-radius: 5px;
  padding: 11px 16px 11px 12px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 5px;
  font-size: 14px;
  font-family: OpenSans, Ariel, sans-serif;
  font-size: 11px;
}

.authboxgreen {
  border: 2px solid #45b408;
}

.authboxred {
  border: 2px solid #e03800;
}

#auth {
  color: #45b408;
}

#noauth {
  color: #e03800;
}
</style>
