<script lang="ts">
	import Avatar from "./Avatar.svelte";

	interface Props {
		name: string;
		role?: string;
		size?: "sm" | "md";
		isHover?: boolean;
	}

	let { name, role, size = "md", isHover = false }: Props = $props();
</script>

<div
	class="flex items-center gap-2 p-1 rounded-[32px] w-full transition-colors {isHover
		? 'bg-dark'
		: 'bg-night'}"
>
	<Avatar {name} size={size === "sm" ? "sm" : "md"} />
	{#if size !== "sm"}
		<div class="flex-1 flex flex-col min-w-0">
			<span class="font-heading text-h3 text-white truncate">{name}</span>
			{#if role}
				<span class="font-body text-body-sm text-white truncate"
					>{role}</span
				>
			{/if}
		</div>
	{/if}
</div>
