<script lang="ts">
	import { User } from 'lucide-svelte';

	interface Props {
		fotoPerfilUrl?: string | null;
		nome: string;
		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
	}

	let { fotoPerfilUrl, nome, size = 'md' }: Props = $props();

	const sizeClasses = {
		xs: 'w-8 h-8',
		sm: 'w-10 h-10',
		md: 'w-12 h-12',
		lg: 'w-16 h-16',
		xl: 'w-32 h-32'
	};

	const iconSizes = {
		xs: 16,
		sm: 20,
		md: 24,
		lg: 32,
		xl: 64
	};
</script>

<div class="avatar placeholder">
	<div
		class={`${sizeClasses[size]} bg-base-200 text-base-content/50 flex items-center justify-center overflow-hidden rounded-full`}
	>
		{#if fotoPerfilUrl}
			<img
				src={fotoPerfilUrl}
				alt={`Foto de perfil de ${nome}`}
				class="h-full w-full object-cover"
			/>
		{:else}
			<User size={iconSizes[size]} />
		{/if}
	</div>
</div>
