import { Avatar } from "@arco-design/web-react";
import { mockData } from "@/data/mockData";
import "./index.css";

const ProfileCard = () => {
  const { profile } = mockData;

  return (
    <div className="profile-card-wrapper">
      <div className="profile-card-user-info">
        <Avatar className="profile-card-user-avatar">
          <img
            alt="avatar"
            src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
          />
        </Avatar>
        <div className="profile-card-user-name">
          <span className="profile-card-user-name-text">{profile.name}</span>
          <p className="profile-card-user-name-student-id">
            学号： {profile.studentId}
          </p>
        </div>
      </div>
      <ul className="profile-card-achievement-info">
        <li className="profile-card-achievement-info-item">
          <span className="profile-card-achievement-info-item-title">学分</span>
          <span className="profile-card-achievement-info-item-text">
            {profile?.badges?.credits}
          </span>
        </li>
        <li className="profile-card-achievement-info-item">
          <span className="profile-card-achievement-info-item-title">
            班级排名
          </span>
          <span className="profile-card-achievement-info-item-text">
            {profile?.badges?.classRank}
          </span>
        </li>
        <li className="profile-card-achievement-info-item">
          <span className="profile-card-achievement-info-item-title">MBTI</span>
          <span className="profile-card-achievement-info-item-text">
            {profile?.badges?.mbti}
          </span>
        </li>
      </ul>
      <ul className="profile-card-class-info">
        <li className="profile-card-class-info-item">
          <i className="profile-card-class-info-item-icon icon-school" />
          <span className="profile-card-class-info-item-title">学校</span>
          <span className="profile-card-class-info-item-text">
            {profile?.school}
          </span>
        </li>
        <li className="profile-card-class-info-item">
          <i className="profile-card-class-info-item-icon icon-major" />
          <span className="profile-card-class-info-item-title">专业</span>
          <span className="profile-card-class-info-item-text">
            {profile?.major}
          </span>
        </li>
        <li className="profile-card-class-info-item">
          <i className="profile-card-class-info-item-icon icon-location" />
          <span className="profile-card-class-info-item-title">
            就业管家课程
          </span>
          <span className="profile-card-class-info-item-text">
            {profile?.course}
          </span>
        </li>
        <li className="profile-card-class-info-item">
          <i className="profile-card-class-info-item-icon icon-course" />
          <span className="profile-card-class-info-item-title">垂直方向</span>
          <span className="profile-card-class-info-item-text">
            {profile?.course}
          </span>
        </li>
      </ul>
    </div>
  );
};

export default ProfileCard;