<script setup>
defineProps({
  href: {
    type: String,
    required: true,
  },
  variant: {
    type: String,
    default: "warning",
    validator: (value) => ["warning", "danger"].includes(value),
  },
});

const variantClasses = {
  warning: "bg-yellow-400 text-yellow-900 hover:bg-yellow-300",
  danger: "bg-red-800 text-white hover:bg-red-700",
};
</script>

<template>
  <a
    :href="href"
    :class="[
      'fixed inset-x-0 top-0 z-40 flex h-10 flex-wrap items-center justify-center gap-2 px-4 py-2 text-center text-sm font-medium transition-colors',
      variantClasses[variant],
    ]"
  >
    <exclamation-triangle-icon class="size-5 shrink-0" />
    <slot />
  </a>
</template>
