<script setup>
defineProps({
  event: { type: Object, required: true },
  getMember: { type: Function, required: true }
});
const emit = defineEmits(["click"]);
</script>

<template>
  <div
    class="px-2 py-1 text-sm font-semibold rounded-lg truncate cursor-pointer transition-colors hover:brightness-95 text-highlighted bg-opacity-50 tracking-tight"
    :style="{
  backgroundColor: getMember(event.teamMemberId)?.color.backgroundDimmed,
  borderLeft: `3px solid ${getMember(event.teamMemberId)?.color.border}`
}"
    @click="emit('click', $event)"
  >
    {{ event.title }}
  </div>
</template>
