<template>
    <section v-if="courses.length">
        <div class="flex justify-between items-center mb-3">
            <h3 class="font-medium">热门课程</h3>
            <router-link to="/courses" class="text-xs text-gray-500 flex items-center">
                更多
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </router-link>
        </div>
        <div class="space-y-4">
            <CourseCard
                v-for="course in courses"
                :key="course.id"
                :course="course"
            />
        </div>
    </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CourseCard from '@/components/ui/CourseCard.vue'
import { getCourseListAPI } from '@/api/course'

const courses = ref([])

/**
 * @description 获取热门课程数据
 * @returns {Promise<void>}
 */
const fetch_courses = async () => {
    const res = await getCourseListAPI({
        sn: 'RMKC',
        limit: 8
    })
    if (res && res.code) {
        courses.value = Array.isArray(res.data) ? res.data : []
    } else {
        courses.value = []
    }
}

onMounted(async () => {
    await fetch_courses()
})
</script>