<?php
/**
 * Step Layout Block - Frontend Render
 *
 * @param array $attributes Block attributes.
 * @param string $content Block content.
 * @param WP_Block $block Block object.
 */

$step_direction = isset($attributes['stepDirection']) ? $attributes['stepDirection'] : 'low-to-high';
$cards = isset($attributes['cards']) ? $attributes['cards'] : array();

$wrapper_attributes = get_block_wrapper_attributes(array(
    'class' => 'bw-step-layout bw-step-layout--' . esc_attr($step_direction),
));

?>

<div <?php echo $wrapper_attributes; ?>>
    <div class="bw-step-layout__inner">
        <?php 
        foreach ($cards as $index => $card) : 
            $card_class = 'bw-step-layout__card bw-step-layout__card--' . ($index + 1);
            $has_image = !empty($card['backgroundImage']);
        ?>
            <div class="<?php echo esc_attr($card_class); ?>" <?php if ($has_image) : ?>data-has-image="true"<?php endif; ?>>
                <?php if ($has_image) : ?>
                    <div class="bw-step-layout__background">
                        <img src="<?php echo esc_url($card['backgroundImage']); ?>" alt="" />
                    </div>
                <?php endif; ?>
                
                <div class="bw-step-layout__content">
                    <h3 class="bw-step-layout__title"><?php echo esc_html($card['title']); ?></h3>
                    <p class="bw-step-layout__description"><?php echo esc_html($card['description']); ?></p>
                    
                    <?php if (!empty($card['buttonText']) && !empty($card['buttonUrl'])) : ?>
                        <a href="<?php echo esc_url($card['buttonUrl']); ?>" class="bw-step-layout__button">
                            <?php echo esc_html($card['buttonText']); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>