---
import type { Post } from '@globalInterfaces';

interface Props {
  post: Post;
}

const { post } = Astro.props;

const formattedDate = new Date(post.publishDate).toLocaleDateString('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

const postLink = `/blog/${post.slug}`;
---

<div class="relative p-6 md:p-8 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 hover:border-neutral-300 dark:hover:border-neutral-700 transition-colors duration-300 group">

  {/* 
      1. ГЛАВНАЯ ССЫЛКА (на весь блок)
      Она лежит в самом низу (z-0) и растянута на всю карточку.
  */}
  <a href={postLink} class="absolute inset-0 z-0" aria-label={`Читать статью: ${post.title}`}></a>

  {/* 
      2. КОНТЕНТ
      Лежит выше ссылки (z-10).
      pointer-events-none пропускает клики сквозь текст на ссылку-подложку.
  */}
  <div class="relative z-10 pointer-events-none">

    {/* Верхняя строка: Иконка звезды и Дата */}
    <div class="flex items-center justify-between mb-4">

      {/* Слева: Иконка звезды и текст "Рекомендую" */}
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-400 group-hover:text-yellow-500 transition-colors">
          <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
        </svg>
        <span class="font-medium uppercase tracking-wide text-xs text-neutral-500">Рекомендую</span>
      </div>

      {/* Справа: Дата с иконкой календаря */}
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-400">
          <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" />
        </svg>
        <span class="font-medium">{formattedDate}</span>
      </div>

    </div>

    {/* 
       Заголовок 
       - Убрал underline
       - Добавил тот же hover-эффект цвета, что и в основной карточке
    */}
    <h3 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100 mb-3 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
      {post.title}
    </h3>

    {/* Описание */}
    <p class="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
      {post.description}
    </p>
  </div>

  {/* 
      3. ТЕГИ
      - Теперь стилизованы как "плашки" (фон, скругление, отступы), как в основной карточке.
      - Использую bg-white (так как сама карточка серая), чтобы создать контраст.
  */}
  {post.tags && post.tags.length > 0 && (
    <div class="relative z-20 mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800 flex flex-wrap gap-2 pointer-events-auto">
      {post.tags.map((tag) => (
        <a
          href={`/blog/tags/${tag.toLowerCase()}`}
          class="text-xs text-neutral-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors bg-white dark:bg-neutral-950 px-2 py-1 rounded border border-neutral-200 dark:border-neutral-800"
        >
          #{tag}
        </a>
      ))}
    </div>
  )}
</div>