{% trans_default_domain 'admin' %}
{% props color = null, payment = null, offer = null, attendance = null, notification = null, size = 'xs', pill = false, content = null %}

{% set calculatedColor = color %}
{% if not calculatedColor %}
    {% if notification %}
        {% set event = notification.event %}
        {% set calculatedColor = {
            'delivered': 'slate',
            'open': 'sky',
            'bounce': 'red',
            'dropped': 'red',
            'click': 'teal',
            'unsubscribe': 'orange',
            'spam': 'orange',
        }[event] | default('gray') %}
    {% elseif payment %}
        {% set calculatedColor = {
            'paid': 'green',
            'failed': 'red',
            'abandoned': 'gray',
        }[payment] | default('orange') %}
    {% elseif offer %}
        {% set calculatedColor = {
            'cancelled': 'red',
            'draft': 'orange',
            'unpublished': 'gray',
        }[offer] | default('green') %}
    {% elseif attendance %}
        {% set calculatedColor = {
            'confirmed': 'green',
            'participated': 'green',
            'waitlisted': 'yellow',
            'withdrawn': 'red',
            'rejected': 'red',
            'unfulfilled': 'red',
            'noshow': 'red',
            'email_unconfirmed': 'orange',
            'consents_outstanding': 'orange',
        }[attendance] | default('gray') %}
    {% else %}
        {% set calculatedColor = 'gray' %}
    {% endif %}
{% endif %}

{% set label = '' %}
{% set label_domain = 'admin' %}
{% if notification %}
    {% set label = 'notificationEngagement.' ~ notification.event %}
{% elseif payment %}
    {% set label = 'payments.status.' ~ payment %}
{% elseif offer %}
    {% set label = 'offers.status.' ~ offer %}
{% elseif attendance %}
    {% set label = 'status.' ~ attendance %}
    {% set label_domain = 'messages' %}
{% endif %}

{% set badge = cva({
    base: 'inline-flex items-center whitespace-nowrap font-medium ring-1 ring-inset',
    variants: {
        pill: {
            true: 'rounded-full',
            false: 'rounded-md',
        },
        size: {
            xs: 'px-1.5 py-0.5 text-xs',
            sm: 'px-2 py-0.5 text-sm',
            base: 'px-2.5 py-1 text-base',
        },
        color: {
            green: 'text-green-700 bg-green-50 ring-green-600/20 dark:text-green-400 dark:bg-green-400/10 dark:ring-green-400/20',
            teal: 'text-teal-700 bg-teal-50 ring-teal-600/20 dark:text-teal-400 dark:bg-teal-400/10 dark:ring-teal-400/20',
            slate: 'text-slate-700 bg-slate-50 ring-slate-600/20 dark:text-slate-400 dark:bg-slate-400/10 dark:ring-slate-400/20',
            sky: 'text-sky-700 bg-sky-50 ring-sky-600/20 dark:text-sky-400 dark:bg-sky-400/10 dark:ring-sky-400/20',
            yellow: 'text-yellow-700 bg-yellow-50 ring-yellow-600/20 dark:text-yellow-400 dark:bg-yellow-400/10 dark:ring-yellow-400/20',
            orange: 'text-orange-700 bg-orange-50 ring-orange-600/20 dark:text-orange-400 dark:bg-orange-400/10 dark:ring-orange-400/20',
            red: 'text-red-700 bg-red-50 ring-red-600/20 dark:text-red-400 dark:bg-red-400/10 dark:ring-red-400/20',
            gray: 'text-gray-700 bg-gray-50 ring-gray-600/20 dark:text-gray-400 dark:bg-gray-400/10 dark:ring-gray-400/20',
        },
    },
    defaultVariants: {
        pill: false,
        size: 'xs',
        color: 'gray',
    },
}) %}

<span {{ attributes.defaults({ class: badge.apply({ pill, size, color: calculatedColor }) }) }}>
    {% block content %}
        {{ content ?? label|trans(domain=label_domain) }}
    {% endblock %}
</span>
{% if notification.reason|default %}
    <span class="-translate-x-1 inline-block cursor-help text-gray-400 hover:text-gray-600" title="{{ notification.reason }}">
        <twig:ux:icon name="ph:info" class="h-4 w-4" />
    </span>
{% endif %}
{% if notification.link|default %}
    <span class="-translate-x-1 inline-block cursor-help text-gray-400 hover:text-gray-600" title="{{ notification.link }}">
        <twig:ux:icon name="ph:link" class="size-4" />
    </span>
{% endif %}
