<?php

/*$block_wrapper_attributes = get_block_wrapper_attributes( array(
    'class' => 'storytelling-hero section'),
);*/

$block_wrapper_attributes = "class='wp-block-purdue-storytelling-hero storytelling-hero section'";
$image_url = $attributes['heroImageURL'] ?? '';
$image_alt = $attributes['heroImageAlt'] ?? '';
$image_position = $attributes['heroImagePosition'] ?? 'center';
?>

<div <?php echo wp_kses_post( $block_wrapper_attributes ); ?>>

    <div class="hero-texture">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/Student-storytelling-texture-background.png' ); ?>" alt="" aria-hidden="true" />
    </div>

    <?php if ( ! empty( $image_url ) ) : ?>
        <div class="hero-image-wrapper image is-16by9 image-position-<?php echo esc_attr( $image_position ); ?>">
            <img class="hero-image" src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>" />
        </div>
    <?php endif; ?>

    <?php if ( ! empty( $attributes['heroTitle'] ) ) : ?>
        <h1 class="hero-title-wrapper"><span class="hero-title"><?php echo wp_kses_post( $attributes['heroTitle'] ); ?></span>
            <?php if ( ! empty( $attributes['heroSubtitle'] ) ) : ?>
                <span class="hero-subtitle"><?php echo $attributes['heroSubtitle']; ?></span>
            <?php endif; ?>    
        </h1>
    <?php endif; ?>

</div>