<template>
  <div
    class="planning-member-row"
    :draggable="draggable"
    @dragstart="$emit('drag-start', member)"
  >
    <div class="planning-member-main">
      <strong>{{ member.firstName }} {{ member.lastName }}</strong>
      <span class="planning-member-meta">
        {{ member.memberAgeGroupLabel || '–' }} · {{ member.lineupRatingLabel || '–' }}
      </span>
    </div>
    <div v-if="showActions" class="planning-member-actions">
      <button type="button" class="btn-secondary btn-upload-sm" :disabled="!canMoveUp" @click="$emit('move-up', member)">↑</button>
      <button type="button" class="btn-secondary btn-upload-sm" :disabled="!canMoveDown" @click="$emit('move-down', member)">↓</button>
      <button type="button" class="btn-secondary btn-upload-sm" @click="$emit('remove', member)">−</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeamPlanningMemberRow',
  props: {
    member: { type: Object, required: true },
    draggable: { type: Boolean, default: true },
    showActions: { type: Boolean, default: false },
    canMoveUp: { type: Boolean, default: true },
    canMoveDown: { type: Boolean, default: true }
  },
  emits: ['drag-start', 'move-up', 'move-down', 'remove']
};
</script>

<style scoped>
.planning-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: white;
  padding: 0.55rem 0.65rem;
}

.planning-member-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.planning-member-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.planning-member-actions {
  display: inline-flex;
  gap: 0.35rem;
}
</style>
