<?php
/**
 * Template part for displaying posts in the blog archive
 *
 * @package shopbar
 */

$categories       = get_the_category();
$primary_category = ! empty( $categories ) ? $categories[0] : null;
$reading_time     = shopbar_estimated_reading_time( get_the_content() );
?>

<article class="blog-card fade-in" data-category="<?php echo esc_attr( implode( ',', array_map( function ( $c ) { return $c->slug; }, $categories ) ) ); ?>">
    <a href="<?php the_permalink(); ?>" class="blog-card-media" aria-label="<?php echo esc_attr( get_the_title() ); ?>">
        <?php if ( has_post_thumbnail() ) : ?>
            <img class="blog-card-image" src="<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'large' ) ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
        <?php else : ?>
            <img class="blog-card-image" src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.svg' ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
        <?php endif; ?>
    </a>
    <div class="blog-card-body">
        <div class="blog-card-meta-line">
            <time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
            <?php if ( $primary_category ) : ?>
                <span class="ml-dot">•</span>
                <span class="ml-cat"><?php echo esc_html( $primary_category->name ); ?></span>
            <?php endif; ?>
        </div>
        <h3 class="blog-card-title">
            <a href="<?php the_permalink(); ?>" style="color:inherit;text-decoration:none;"><?php the_title(); ?></a>
        </h3>
        <p class="blog-card-excerpt"><?php echo esc_html( wp_trim_words( get_the_excerpt(), 18, '...' ) ); ?></p>
        <div class="blog-author-row">
            <span><?php shopbar_icon( 'user', 14 ); ?> <?php the_author(); ?></span>
            <span><?php shopbar_icon( 'clock', 14 ); ?> <?php echo esc_html( $reading_time ); ?> <?php esc_html_e( 'min read', 'shopbar' ); ?></span>
        </div>
        <a href="<?php the_permalink(); ?>" class="blog-read-more">
            <?php esc_html_e( 'Read More', 'shopbar' ); ?> <?php shopbar_icon( 'arrow-right', 16 ); ?>
        </a>
    </div>
</article>
