<script lang="ts" module>
	export type AvatarShape = 'circle' | 'square';
	export type AvatarPresence = 'offline' | 'online';
</script>

<script lang="ts">
	import type { DaisyColor, DaisySize } from '$lib/types';
	import clsx from 'clsx';
	import type { SvelteHTMLElements } from 'svelte/elements';
	import { twMerge } from 'tailwind-merge';

	type Props = {
		img?: string;
		placeholder: string;
		presence?: AvatarPresence;
		ring?: DaisyColor;
		shape?: AvatarShape;
		size?: DaisySize;
	} & Omit<SvelteHTMLElements['div'], 'children'>;

	let {
		class: className,
		img,
		placeholder,
		presence,
		ring,
		shape = 'circle',
		size = 'md',
		...props
	}: Props = $props();
</script>

<div
	{...props}
	class={twMerge('avatar', clsx(className))}
	class:avatar-online={presence === 'online'}
	class:avatar-offline={presence === 'offline'}
	class:avatar-placeholder={placeholder}
>
	<div
		class={twMerge(
			'rounded-xl',
			clsx({
				'rounded-xl': shape === 'square',
				'rounded-full': shape === 'circle',
				'w-12': size === 'xs',
				'w-16': size === 'sm',
				'w-20': size === 'md',
				'w-24': size === 'lg',
				'w-32': size === 'xl',
				'avatar-ring ring-offset-base-100 ring ring-offset-2': !!ring,
			})
		)}
		class:bg-neutral={placeholder}
		class:ring-neutral={ring === 'neutral'}
		class:ring-primary={ring === 'primary'}
		class:ring-secondary={ring === 'secondary'}
		class:ring-accent={ring === 'accent'}
		class:ring-info={ring === 'info'}
		class:ring-success={ring === 'success'}
		class:ring-warning={ring === 'warning'}
		class:ring-error={ring === 'error'}
	>
		{#if img}
			<img src={img} alt={placeholder} />
		{:else}
			<span
				class:text-5xl={size === 'xl'}
				class:text-3xl={size === 'lg'}
				class:text-2xl={size === 'md'}
				class:text-xs={size === 'xs'}>{placeholder}</span
			>
		{/if}
	</div>
</div>