{#
/**
 * @file
 * FlowDrop Grid Component
 *
 * A responsive grid layout for organizing cards with consistent responsive
 * behavior across different card types (stat cards, action links, content cards).
 *
 * Available variables:
 * - variant: Grid layout variant (stats, actions, cards). Default: actions
 * - gap: Gap size between items (sm, md, lg). Default: md
 * - stagger: Enable staggered entrance animation. Default: false
 * - min_item_width: Custom minimum item width (CSS value)
 * - columns: Fixed number of columns (overrides auto-fit)
 *
 * Usage (PHP render array):
 * $build['grid'] = [
 *   '#type' => 'component',
 *   '#component' => 'flowdrop_ui_components:grid',
 *   '#props' => ['variant' => 'stats', 'stagger' => TRUE],
 *   '#slots' => ['default' => $items],
 * ];
 */
#}

{% set variant = variant|default('actions') %}
{% set gap = gap|default('md') %}
{% set stagger = stagger|default(false) %}

{# Build CSS classes #}
{% set classes = [
  'fd-grid',
  'fd-grid--' ~ variant,
  'fd-grid--gap-' ~ gap,
] %}

{% if stagger %}
  {% set classes = classes|merge(['fd-stagger-in']) %}
{% endif %}

{% if columns %}
  {% set classes = classes|merge(['fd-grid--cols-' ~ columns]) %}
{% endif %}

{# Build inline styles for custom min width #}
{% set styles = {} %}
{% if min_item_width %}
  {% set styles = {'--fd-grid-min-item-width': min_item_width} %}
{% endif %}

<div class="{{ classes|join(' ') }}"{% if styles %} style="{% for prop, value in styles %}{{ prop }}: {{ value }};{% endfor %}"{% endif %}>
  {{ default }}
</div>

