<script lang="ts">
	import Avatar from './Avatar.svelte';
	import type { IUser } from '$lib/stores/auth';

	const { user, onEdit, onDelete }: { user: IUser; onEdit: any; onDelete: any } = $props();
</script>

<div class="useritem">
	<div class="useritem-avatar">
		<Avatar username={user.displayName} url={user.avatar || '/img/default-avatar.png'} />
		<button class="btn" onclick={onEdit}> Modifier </button>
		<button class="btn" onclick={onDelete}> Supprimer </button>
	</div>
	<div class="useritem-details">
		<p><b>Nom</b>: {user.displayName}</p>
		<p><b>Login</b>: {user.login}</p>
		<p><b>Role</b>: {user.isAdmin ? 'ADMIN' : 'USER'}</p>
		<p><b>Id</b>: {user.id}</p>
	</div>
</div>

<style>
	.useritem {
		display: flex;
		background-color: var(--bg-secondary);
		margin: 16px 0;
		padding: 8px;
		border-radius: 8px;
		gap: 8px;
	}

	.useritem-avatar,
	.useritem-details {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.useritem-avatar {
		align-items: center;
	}
</style>
