<script lang="ts" setup>
import type { ICourse } from "~/types";

defineProps<{
  data: ICourse;
}>();

const openCourse = (id: string) => {
  window.open(`/course/${id}`, "_blank", "noopener,noreferrer");
};
</script>

<template>
  <div class="flex flex-col gap-2">
    <NuxtImg
      :src="data.thumbnail_url"
      alt="课程封面"
      class="w-full aspect-video rounded-md shadow-md cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:ring-4 hover:ring-primary-background"
      @click="openCourse(data.id)"
    />
    <div class="px-1.5 flex flex-col gap-1">
      <div class="flex justify-between items-center gap-2">
        <h1 class="flex-1 text-base font-medium text-ellipsis line-clamp-1">
          {{ data.title || "未知课程" }}
        </h1>
        <p
          class="text-xs text-muted-foreground font-medium flex items-center gap-0.5"
        >
          <Icon name="tabler:user" size="14px" />
          <span>{{ data.teacher_name || "未知教师" }}</span>
        </p>
      </div>
      <div class="flex justify-between gap-1 text-xs text-muted-foreground/80">
        <div class="flex-1 flex flex-col">
          <p>
            学期：<span>{{ data.semester || "未知" }}</span>
          </p>
          <p>
            课程ID：<span>{{ data.id }}</span>
          </p>
        </div>
        <div class="flex flex-col items-end">
          <p>{{ data.school_name }}</p>
          <div class="flex items-center gap-1">
            <div
              v-if="data.is_published"
              class="w-2 h-2 rounded-full bg-emerald-400"
            />
            <div v-else class="w-2 h-2 rounded-full bg-gray-400" />
            <p class="text-xs text-muted-foreground/80">
              {{ data.is_published ? "开课" : "关课" }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
