﻿<script setup lang="ts">
defineProps<{
  authError?: UIAuthError
}>()
</script>

<template>
  <div
    v-if="authError"
    class="bg-red-100 border border-red-400 text-red-700 text-center text-sm rounded relative px-4 py-1 mt-1 w-full flex items-center justify-center space-x-2"
  >
    <div class="h-4 w-4 shrink-0">
      <svg
        id="Capa_1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 554.2 554.199"
        xml:space="preserve"
        fill="currentColor"
      >
        <g>
          <path
            d="M538.5,386.199L356.5,70.8c-16.4-28.4-46.7-45.9-79.501-45.9c-32.8,0-63.1,17.5-79.5,45.9L12.3,391.6
            c-16.4,28.4-16.4,63.4,0,91.8C28.7,511.8,59,529.3,91.8,529.3H462.2c0.101,0,0.2,0,0.2,0c50.7,0,91.8-41.101,91.8-91.8
            C554.2,418.5,548.4,400.8,538.5,386.199z M316.3,416.899c0,21.7-16.7,38.3-39.2,38.3s-39.2-16.6-39.2-38.3V416
            c0-21.601,16.7-38.301,39.2-38.301S316.3,394.3,316.3,416V416.899z M317.2,158.7L297.8,328.1c-1.3,12.2-9.4,19.8-20.7,19.8
            s-19.4-7.7-20.7-19.8L237,158.6c-1.3-13.1,5.801-23,18-23H299.1C311.3,135.7,318.5,145.6,317.2,158.7z"
          />
        </g>
      </svg>
    </div>
    <span class="block sm:inline whitespace-nowrap">{{ authError.message }}</span>
  </div>
</template>

<style scoped></style>
