<template>
    <div class="profile-list">
      <div v-for="profile in profiles" :key="profile.id" class="profile">
        <img :src="profile.avatar" alt="프로필 사진" class="avatar" />
        <div class="info">
          <p class="name">{{ profile.name }}</p>
          <p class="vacation-count">남은 휴가: {{ profile.remainingVacations }}일</p>
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        profiles: [
          { id: 1, name: '김철수', avatar: '/avatars/user1.png', remainingVacations: 15 },
          { id: 2, name: '박영희', avatar: '/avatars/user2.png', remainingVacations: 11 },
          { id: 3, name: '이민호', avatar: '/avatars/user3.png', remainingVacations: 10 },
        ],
      };
    },
  };
  </script>

  <style scoped>
  .profile-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .profile {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .info {
    display: flex;
    flex-direction: column;
  }
  .name {
    font-weight: bold;
  }
  .vacation-count {
    color: gray;
  }
  </style>
