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

<template>
  <slot
    :event="event"
    :get-member="getMember"
  >
    <UCard
      :ui="{ body: 'p-3 sm:p-4' }"
      class="cursor-pointer hover:ring-2 hover:ring-primary-500 transition-all"
      @click="emit('click', $event)"
    >
      <div class="flex items-center gap-4">
        <div class="flex flex-col min-w-[60px]">
          <span class="text-sm font-medium">{{ event.startTime }}</span>
          <span class="text-xs text-muted">{{ event.endTime }}</span>
        </div>

        <div
          class="w-1 h-8 rounded-full"
          :style="{ backgroundColor: getMember(event.teamMemberId)?.color.background }"
        />

        <div class="flex-1">
          <h3 class="font-medium">
            {{ event.title }}
          </h3>
        </div>

        <div class="flex overflow-hidden">
          <UAvatar
            :src="getMember(event.teamMemberId)?.src"
            :alt="getMember(event.teamMemberId)?.name"
            size="xs"
            class="ring-2 ring-white dark:ring-gray-900"
          />
        </div>
      </div>
    </UCard>
  </slot>
</template>
