<script setup lang="ts">
import type { AuthUser } from '#shared/types/auth';

const { user } = defineProps<{
    user: AuthUser;
}>();

// TODO: Remove once this is a field on the users
const AVATAR =
    'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
</script>

<template>
    <div class="group/user flex flex-row items-center justify-between gap-4">
        <Avatar>
            <AvatarImage :src="AVATAR" />
        </Avatar>
        <div class="flex grow flex-col leading-4">
            <span class="text-sm font-medium">{{ user.name }}</span>
            <span class="text-muted-foreground text-xs">{{ user.email }}</span>
        </div>
        <div class="opacity-0 transition-all group-hover/user:opacity-100">
            <slot name="actions" />
        </div>
    </div>
</template>
