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

interface Props {
  course: Course;
}

const { course } = Astro.props;

const courseLink = `/courses/${course.slug}`;
// Используем placeholder из unsplash, пока нет реального изображения
const thumbnailUrl = course.thumbnail ? `${import.meta.env.PUBLIC_POCKETBASE_URL}/api/files/courses/${course.id}/${course.thumbnail}` : `https://source.unsplash.com/400x225/?education,${course.title.split(' ')[0]}`;
---

<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={courseLink} class="absolute inset-0 z-0" aria-label={`Подробнее о курсе: ${course.title}`}></a>

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

    {/* Изображение курса */}
    <div class="mb-4">
      <img
        src={thumbnailUrl}
        alt={course.title}
        class="w-full h-40 object-cover rounded-lg"
        loading="lazy"
      />
    </div>

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

      {/* Слева: Уровень сложности */}
      <div class="flex items-center gap-2">
        <span class="font-medium uppercase tracking-wide text-xs text-neutral-500 bg-neutral-200 dark:bg-neutral-800 px-2 py-1 rounded">
          {course.level}
        </span>
      </div>

      {/* Справа: Цена */}
      <div class="flex items-center gap-2 text-lg font-bold text-indigo-600 dark:text-indigo-400">
        {course.price} ₽
      </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">
      {course.title}
    </h3>

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

    {/* Продолжительность */}
    <div class="flex items-center gap-2 text-sm text-neutral-500 mb-4">
      <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="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium">{course.duration}</span>
    </div>
  </div>

  {/*
      3. ТЕГИ
      - Теперь стилизованы как "плашки" (фон, скругление, отступы), как в основной карточке.
      - Использую bg-white (так как сама карточка серая), чтобы создать контраст.
  */}
  {course.tags && course.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">
      {course.tags.map((tag) => (
        <span class="text-xs text-neutral-500 bg-white dark:bg-neutral-950 px-2 py-1 rounded border border-neutral-200 dark:border-neutral-800">
          #{tag}
        </span>
      ))}
    </div>
  )}
</div>