<script lang="ts" setup>
import type { ICourseTeamMember } from "~/api/course";

defineProps<{
  member: ICourseTeamMember;
  isCurrentUser?: boolean;
}>();

const emit = defineEmits<{
  delete: [teacherId: number];
}>();
</script>

<template>
  <div class="member-card relative group/member-card">
    <div
      class="absolute top-0 right-0 flex flex-col gap-1 invisible group-hover/member-card:visible"
    >
      <Button
        variant="link"
        size="icon"
        @click.stop="emit('delete', member.teacherId)"
      >
        <Icon name="tabler:trash" size="16px" class="text-red-500" />
      </Button>
    </div>

    <Avatar size="base">
      <AvatarImage
        :src="member.teacher.avatar || ''"
        :alt="member.teacher.userName"
      />
      <AvatarFallback class="rounded-lg">
        {{ member.teacher.userName.slice(0, 2).toUpperCase() }}
      </AvatarFallback>
    </Avatar>

    <div class="flex flex-col gap-1">
      <h1
        class="text-sm font-medium text-ellipsis line-clamp-1"
        :class="`${isCurrentUser ? 'text-amber-500' : ''}`"
      >
        {{ member.teacher.userName || "未知教师" }}
      </h1>
      <p class="text-xs text-muted-foreground/80">
        工号：{{ member.teacher.employeeId || "未知" }}
      </p>
      <p class="text-xs text-muted-foreground/80">
        {{ member.teacher.schoolId || "未知学校" }}
      </p>
      <p class="text-xs text-muted-foreground/80">
        {{ member.teacher.collegeId || "未知学院" }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.member-card {
  @apply p-4 flex justify-start items-center gap-4 border border-muted-foreground/20 rounded-lg bg-background/50 shadow-md transition duration-300 ease-in-out hover:shadow-lg hover:ring-4 hover:ring-secondary;
}
</style>
