{% trans_default_domain 'admin' %}
{% props type = 'info', message = null, icon = null %}

{#
   Single in-page alert component for the admin.

   Visual treatment is the bordered/outline-icon style that was
   previously hand-rolled in LoginMethods.html.twig and the login
   index — those have been replaced by <twig:Admin:Alert> so the
   look is consistent across the admin.

   Pass an explicit `icon` (Phosphor name) to override the
   type-default — e.g. icon="ph:lock" for a read-only notice or
   icon="ph:git-branch" for a variant notice.
#}

{% set tone = {
    confirm: {
        wrap: 'border-green-300 bg-green-50 text-green-800 dark:border-green-700 dark:bg-green-900/20 dark:text-green-200',
        icon: 'ph:check-circle',
    },
    error: {
        wrap: 'border-red-300 bg-red-50 text-red-800 dark:border-red-700 dark:bg-red-900/20 dark:text-red-200',
        icon: 'ph:x-circle',
    },
    warning: {
        wrap: 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-200',
        icon: 'ph:warning',
    },
    info: {
        wrap: 'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-200',
        icon: 'ph:info',
    },
}[type] %}

<div {{ attributes.defaults({class: 'flex items-start gap-3 rounded-lg border px-4 py-3 text-sm ' ~ tone.wrap}) }}>
    <twig:ux:icon name="{{ icon ?? tone.icon }}" class="mt-0.5 size-5 flex-none" />
    <div class="flex-1 leading-5">
        {% block content %}{{ message|trans }}{% endblock %}
    </div>
</div>
