<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package computer-repair-solutions
 */

?>
<div class="container mb-5 maincontent">
    <div class="post-item bg-white rounded shadow-sm border p-4 transition">

        <!-- Text Content -->
        <div class="d-flex flex-column">

            <!-- Meta -->
            <div class="d-flex flex-wrap align-items-center text-muted small gap-3 mb-2">
                <span>👤 <?php the_author(); ?></span>

                <span>
                    <i class="fa-solid fa-calendar me-1"></i>
                    <?php echo get_the_date(); ?>
                </span>

                <span class="d-flex align-items-center">
                    <i class="fa-regular fa-clock me-2"></i>
                    <?php echo esc_html(
                        computer_repair_solutions_estimated_reading_time(get_the_content())
                    ); ?>
                </span>
            </div>

            <!-- Title -->
            <h2 class="fs-3 fw-bold text-dark mb-2">
                <a href="<?php the_permalink(); ?>" class="text-decoration-none text-dark post-title-link">
                    <?php the_title(); ?>
                </a>
            </h2>

            <!-- Excerpt -->
            <p class="text-secondary mb-3">
                <?php echo wp_trim_words(get_the_content(), 20, '...'); ?>
            </p>

            <!-- Read More -->
            <div>
                <a href="<?php the_permalink(); ?>"
                   class="text-primary fw-semibold d-inline-flex align-items-center gap-1">
                    <?php esc_html_e('Read Full Article', 'computer-repair-solutions'); ?>
                    <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>

        </div>
    </div>
</div>
