<script setup lang="ts">
import { ElTag } from 'element-plus';

defineOptions({ name: 'ProjectRequirementMemberSelectOption' });

interface Props {
  nickname: string;
  roleName: string;
}

defineProps<Props>();
</script>

<template>
  <div class="member-select-option">
    <span class="member-select-option__name">{{ nickname }}</span>
    <ElTag type="info" size="small" class="member-select-option__role">{{ roleName }}</ElTag>
  </div>
</template>

<style scoped>
.member-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.member-select-option__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-select-option__role {
  flex-shrink: 0;
}
</style>
