{# API #}
{%- set props = props | default([]) -%}
{%- set _color = props.color | default('success') -%}
{%- set _iconName = props.iconName | default(null) -%}
{%- set _isCentered = props.isCentered | default(false) -%}
{%- set _elementType = props.elementType | default('div') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Alert' -%}
{%- set _rootColorClassName = _spiritClassPrefix ~ 'Alert--' ~ _color -%}
{%- set _rootCenteredClassName = _isCentered ? _spiritClassPrefix ~ 'Alert--center' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootCenteredClassName, _styleProps.className ] -%}
{%- set _iconNameByColor = 'info' -%}
{% if _color == 'success' %}
  {%- set _iconNameByColor = 'check-plain' -%}
{% elseif _color == 'warning' %}
  {%- set _iconNameByColor = 'warning' -%}
{% elseif _color == 'danger' %}
  {%- set _iconNameByColor = 'danger' -%}
{% endif %}
{%- set _iconNameValue = _iconName | default(_iconNameByColor) -%}
{%- set _allowedAttributes = [ 'role' ] -%}

<{{ _elementType }} {{ mainProps(props, _allowedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
  <Icon name="{{ _iconNameValue }}" />
  <div>
    {%- block content %}{% endblock -%}
  </div>
</{{ _elementType }}>
