{#
/**
 * @file
 * FlowDrop Button Component
 *
 * Styled button with multiple variants.
 *
 * Available variables:
 * - label: Button text (required)
 * - variant: Style variant (primary, secondary, ghost, danger)
 * - size: Button size (sm, md, lg)
 * - url: If provided, renders as a link
 * - icon: Optional SVG icon markup
 * - icon_position: Icon position (start, end)
 * - disabled: Whether button is disabled
 * - full_width: Whether button takes full width
 * - type: HTML button type (button, submit, reset)
 */
#}

{% set variant = variant|default('primary') %}
{% set size = size|default('md') %}
{% set icon_position = icon_position|default('start') %}
{% set type = type|default('button') %}

{% set classes = [
  'fd-button',
  'fd-button--' ~ variant,
  'fd-button--' ~ size,
  full_width ? 'fd-button--full-width',
  disabled ? 'fd-button--disabled'
]|filter(v => v)|join(' ') %}

{% if url and not disabled %}
  <a href="{{ url }}" class="{{ classes }}">
    {% if icon and icon_position == 'start' %}
      <span class="fd-button__icon">{{ icon|raw }}</span>
    {% endif %}
    <span class="fd-button__label">{{ label }}</span>
    {% if icon and icon_position == 'end' %}
      <span class="fd-button__icon">{{ icon|raw }}</span>
    {% endif %}
  </a>
{% else %}
  <button type="{{ type }}" class="{{ classes }}"{% if disabled %} disabled{% endif %}>
    {% if icon and icon_position == 'start' %}
      <span class="fd-button__icon">{{ icon|raw }}</span>
    {% endif %}
    <span class="fd-button__label">{{ label }}</span>
    {% if icon and icon_position == 'end' %}
      <span class="fd-button__icon">{{ icon|raw }}</span>
    {% endif %}
  </button>
{% endif %}

