---
import Layout from '@layouts/Layout.astro'
import CourseCard from '@components/courses/CourseCard.astro'
import type { Course } from '@globalInterfaces';
import { pb } from '@lib/pocketbase';

const title = 'Курсы программирования | Redi - Веб-разработчик'
const description = 'Купить курсы по программированию'

// Получаем курсы из PocketBase
let courses: Course[] = [];
try {
  const records = await pb.collection('courses').getFullList({
    filter: 'isActive = true',
    sort: 'order',
    requestKey: 'courses_list'
  });

  courses = records.map(record => ({
    id: record.id,
    title: record.title,
    slug: record.slug,
    description: record.description,
    price: record.price,
    duration: record.duration,
    level: record.levels, 
    tags: record.tags || [],
    thumbnail: record.thumbnail || '',
    content: record.content || ''
  }));
} catch (error) {
  console.error('Ошибка при получении курсов:', error);
  courses = []; // В случае ошибки возвращаем пустой массив
}
---

<Layout title={title} description={description} canonicalLink="/courses">
  <main class="max-w-7xl mx-auto my-12 px-4 sm:px-6 lg:px-0 space-y-16">
    <div class="text-center">
      <h1 class="text-4xl font-bold text-neutral-900 dark:text-neutral-100 mb-4">Курсы программирования</h1>
      <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
        Выберите подходящий курс и начните путь в веб-разработку уже сегодня
      </p>
    </div>

    {courses.length > 0 ? (
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
        {courses.map(course => (
          <CourseCard course={course} />
        ))}
      </div>
    ) : (
      <div class="text-center py-12">
        <p class="text-xl text-neutral-600 dark:text-neutral-400">
          Курсы в настоящее время недоступны
        </p>
      </div>
    )}
  </main>
</Layout>