<?php
get_header('blog');
?>

<div class="container">
    <div class="row">
        <div class="col-md-12 justify-content-center">
            <h1>Search: <?php echo $_GET['s']; ?></h1>
        </div>
    </div>
</div>

<div class="container">
    <div class="row results-grid">
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = [
            'showposts' => -1,
            'post_type' => 'post',
            's'         => $_GET['s']
        ];
        $query = new WP_Query($args);

        if ($query->have_posts()) :
            $counter = 1;
            while ($query->have_posts()) : $query->the_post();

                // Adjust image size and card style based on post position
                if ($counter === 1) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-lg';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'large');
                } elseif ($counter === 2) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-md';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'medium');
                } else {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-sm';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'small');
                }

                if ($paged !== 1) {
                    // Set a default style for paged posts if needed
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card';
                }
                ?>
                <div class="<?php echo $colClass; ?>">
                    <div class="card mb-2">
                        <a href="<?php the_permalink(); ?>" aria-label="<?php the_title(); ?>">
                            <img src="<?php echo $featuredImage; ?>" class="card-img-top" alt="<?php the_title(); ?>">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h5>
                            <div class="card-text">
                                <?php the_excerpt(); ?>
                            </div>
                            <div class="card-meta">
                                <span><?php echo get_the_date("F jS, Y"); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
                $counter++;
            endwhile;
        else : ?>
            <div class="col-12">
                <p>No posts found.</p>
            </div>
        <?php endif; ?>
        <?php wp_reset_query(); ?>
    </div>
</div>

<!-- End off-canvas-container -->

<?php
get_footer('blog');
?>