<template>
  <div class="flex flex-col">
    <div class="text-5 font-bold">{{ userInfo.name }}</div>
    <div class="text-3 color-gray">ID: {{ userInfo.id }}</div>
    <div class="flex items-center gap-2">
      <el-icon color="var(--el-color-primary)"><icon-cs-user-auth /></el-icon>
      <div>权限组：{{ userInfo.auth.name }}</div>
    </div>
    <div class="flex items-center gap-2">
      <div class="w-4 h-4 flex justify-center items-center">
        <el-icon size="2rem" :color="userInfo.club ? 'var(--el-color-primary)' : 'black'">
          <icon-cs-club />
        </el-icon>
      </div>
      <div>
        <template v-if="userInfo.club?.name">所属社团：{{ userInfo.club.name }}</template>
        <template v-else>暂未加入社团</template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { UserInfo } from '@/schemas/response';
defineProps<{ userInfo: UserInfo }>();
</script>
