---
const { currentPost } = Astro.props;

const posts = await Astro.glob('../pages/posts/*.mdx');

const processedPosts = await Promise.all(posts.map(async (post) => {
  const { frontmatter, url, file } = await post;
  const fileName = file.split('/').pop().replace('.mdx', '').toLowerCase();
  return { fileName, frontmatter, url };
}));

const relatedPosts = processedPosts
  .filter((post) => 
    currentPost.relacionados?.map(rel => rel.toLowerCase()).includes(post.fileName)
  )
  .map((post) => ({
    title: post.frontmatter?.titulo || 'Sin título',
    excerpt: post.frontmatter?.descripcion || '',
    url: post.url || '#',
    imagen: post.frontmatter?.imagen || '/default-image.jpg',
  }));
---


<section class="related-posts mt-5 col-lg-8">
    <h4 class="mb-3">Posts Relacionados</h4>
    <ul class="list-group">
        {
            relatedPosts.map((post) => (
                <li class="list-group-item list-group-item-action">
                    <a href={post.url} class="text-decoration-none">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img 
                                    src={post.imagen} 
                                    alt={post.title}
                                    class="related-post-img"
                                />
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">{post.title}</h6>
                                <small class="text-muted excerpt-text">{post.excerpt}</small>
                            </div>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        </div>
                    </a>
                </li>
            ))
        }
    </ul>
</section>

<style>
    .related-post-img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
    }

    .list-group-item {
        transition: background-color 0.2s;
    }

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

    .excerpt-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }
</style>