---
import BlogCard from '@components/blog/BlogCard.astro';
import { getPostImageUrl } from '@lib/pb';

interface Post {
  id: string;
  slug: string;
  title: string;
  description: string;
  category: string;
  categoryColor: string;
  date: string;
  readTime: string;
  readmeTime?: string;
  image: string;
}

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

const { posts, currentSlug } = Astro.props;

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

// Фильтруем текущую статью
const filteredPosts = currentSlug 
  ? posts.filter(post => post.slug !== 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.title}
        description={post.description}
        category={post.category}
        categoryColor={post.categoryColor}
        date={formatDate(post.date)}
        readTime={post.readTime}
        readmeTime={post.readmeTime}
        image={getPostImageUrl(post)}
        slug={`/blog/${post.slug}`}
      />
    ))}
  </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>