---
import BlogCard from '@components/blog/BlogCard.astro';

interface CollectionEntry {
  id: string;
  data: {
    title: string;
    description: string;
    category: string;
    categoryColor: string;
    date: Date;
    readTime: string;
    imageUrl: string;
  };
}

interface Props {
  posts: CollectionEntry[];
  currentSlug?: string;
}

const { posts, currentSlug } = Astro.props;

// Форматируем дату
const formatDate = (date: Date) => {
  return date.toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  });
};

// Фильтруем текущую статью
const filteredPosts = currentSlug 
  ? posts.filter(post => post.id !== currentSlug).slice(0, 3)
  : posts.slice(0, 3);
---

<section class="related-posts">
  <h3 class="section-title">Читайте также</h3>

  <div class="related-grid">
    {filteredPosts.map((post) => (
      <BlogCard
        title={post.data.title}
        description={post.data.description}
        category={post.data.category}
        categoryColor={post.data.categoryColor}
        date={formatDate(post.data.date)}
        readTime={post.data.readTime}
        imageUrl={post.data.imageUrl}
        slug={`/blog/${post.id}`}
      />
    ))}
  </div>
</section>

<style is:global>
  .related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #f1f5f9;
  }

  /* Сбрасываем нумерацию заголовков от ArticleLayout */
  .related-posts .blog-card .card-title {
    counter-increment: none !important;
    display: block !important;
  }

  .related-posts .blog-card .card-title::before {
    display: none !important;
  }

  .section-title {
    color: #1e293b;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 2rem;
    letter-spacing: -0.02em;
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  @media (max-width: 1024px) {
    .related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .related-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
</style>