{#
/**
 * @file
 * Button with Variants component template.
 *
 * Available variables:
 * - text: The button text
 * - url: Optional URL for link buttons
 * - size: Button size (sm, md, lg)
 * - variant: Style variant (primary, secondary, outline, ghost, danger, success)
 * - disabled: Whether the button is disabled
 * - attributes: HTML attributes
 */
#}

{% set base_classes = 'inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed font-sans' %}

{# Size classes based on size prop - using very explicit padding #}
{% if size == 'sm' %}
  {% set size_classes = 'text-sm' %}
  {% set padding_classes = 'px-4 py-2' %}
{% elseif size == 'lg' %}
  {% set size_classes = 'text-lg' %}
  {% set padding_classes = 'px-8 py-4' %}
{% else %}
  {% set size_classes = 'text-base' %}
  {% set padding_classes = 'px-6 py-3' %}
{% endif %}

{# Variant classes based on variant prop #}
{% if variant == 'primary' %}
  {% set variant_classes = 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500' %}
{% elseif variant == 'secondary' %}
  {% set variant_classes = 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500' %}
{% elseif variant == 'outline' %}
  {% set variant_classes = 'bg-transparent border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500' %}
{% elseif variant == 'ghost' %}
  {% set variant_classes = 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500' %}
{% elseif variant == 'danger' %}
  {% set variant_classes = 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500' %}
{% elseif variant == 'success' %}
  {% set variant_classes = 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500' %}
{% else %}
  {# Default to primary if variant not recognized #}
  {% set variant_classes = 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500' %}
{% endif %}

{# Combine all classes #}
{% set button_classes = [
  base_classes,
  padding_classes,
  size_classes,
  variant_classes,
]|join(' ') %}

{# Render as link or button #}
{% if url %}
  <a href="{{ url }}" class="{{ button_classes }} {{ disabled ? 'pointer-events-none opacity-50' : '' }}">
    {{ text }}
  </a>
{% else %}
  <button type="button" class="{{ button_classes }}"{% if disabled %} disabled="disabled"{% endif %}>
    {{ text }}
  </button>
{% endif %}

