{#
/**
 * @file
 * FlowDrop Pill Component
 *
 * A versatile pill/tag component for status flags, state flags, labels, and tags.
 * Supports multiple styles, sizes, and optional icons.
 *
 * Available variables:
 * - label: The pill text (required)
 * - variant: Semantic color (primary, secondary, success, warning, error, info, neutral, brand-*)
 * - style: Visual style (filled, outlined, ghost, soft)
 * - size: Pill size (xs, sm, md, lg)
 * - icon: Optional icon or emoji to display
 * - icon_position: Position of icon (before, after)
 * - dismissible: Show dismiss button
 * - rounded: Use full pill shape
 * - uppercase: Transform text to uppercase
 * - interactive: Enable hover/focus states
 * - url: Optional URL to make pill a link
 * - attributes: Additional HTML attributes
 */
#}

{% set variant = variant|default('neutral') %}
{% set style = style|default('soft') %}
{% set size = size|default('md') %}
{% set icon_position = icon_position|default('before') %}
{% set dismissible = dismissible|default(false) %}
{% set rounded = rounded|default(true) %}
{% set uppercase = uppercase|default(false) %}
{% set interactive = interactive|default(false) %}

{# Build CSS class list #}
{% set classes = [
  'fd-pill',
  'fd-pill--' ~ variant,
  'fd-pill--style-' ~ style,
  'fd-pill--size-' ~ size,
  rounded ? 'fd-pill--rounded' : 'fd-pill--soft-corners',
  uppercase ? 'fd-pill--uppercase' : '',
  interactive or url ? 'fd-pill--interactive' : '',
  dismissible ? 'fd-pill--dismissible' : '',
]|filter(v => v)|join(' ') %}

{# Determine the wrapper element #}
{% if url %}
  <a href="{{ url }}" class="{{ classes }}"{{ attributes ? attributes|without('class', 'href') }}>
{% else %}
  <span class="{{ classes }}"{{ attributes ? attributes|without('class') }}>
{% endif %}

  {# Icon before label #}
  {% if icon and icon_position == 'before' %}
    <span class="fd-pill__icon fd-pill__icon--before" aria-hidden="true">{{ icon }}</span>
  {% endif %}

  {# Label #}
  <span class="fd-pill__label">{{ label }}</span>

  {# Icon after label #}
  {% if icon and icon_position == 'after' %}
    <span class="fd-pill__icon fd-pill__icon--after" aria-hidden="true">{{ icon }}</span>
  {% endif %}

  {# Dismiss button #}
  {% if dismissible %}
    <button type="button" class="fd-pill__dismiss" aria-label="Remove {{ label }}">
      <svg class="fd-pill__dismiss-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
      </svg>
    </button>
  {% endif %}

{% if url %}
  </a>
{% else %}
  </span>
{% endif %}

