<script setup>
const props = defineProps({
  teams: { type: Array, required: true }
});
const emit = defineEmits(["toggle-member"]);
function toggleMember(team, member) {
  emit("toggle-member", {
    teamId: team.id,
    memberId: member.id,
    visible: !member.visible
  });
}
</script>

<template>
  <div class="flex flex-col gap-6 mt-4">
    <div
      v-for="team in props.teams"
      :key="team.id"
      class="flex flex-col gap-1"
    >
      <div class="text-xs font-medium px-2 mb-1 text-default">
        {{ team.name }}
      </div>
      <div class="flex flex-col gap-0.5">
        <button
          v-for="member in team.members"
          :key="member.id"
          type="button"
          class="group flex items-center gap-3 px-2 py-1.5 rounded-md cursor-pointer transition-colors hover:bg-elevated w-full text-left"
          @click="toggleMember(team, member)"
        >
          <div
            class="relative flex items-center justify-center w-3.5 h-3.5 rounded transition-colors"
            :style="{
  backgroundColor: member.visible ? member.color.background : 'transparent',
  borderColor: member.color.background,
  borderWidth: member.visible ? '0' : '1.5px'
}"
          >
            <UIcon
              v-if="member.visible"
              name="i-lucide-check"
              class="w-2.5 h-2.5 text-black"
            />
          </div>

          <span class="text-sm flex-1 truncate font-medium">{{ member.name }}</span>
        </button>
      </div>
    </div>
  </div>
</template>
