<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const user = tv({
		slots: {
			avatar: "",
			handle: "truncate text-foreground-default"
		},
		variants: {
			size: {
				sm: {
					avatar: "size-5",
					handle: "text-xs"
				},
				md: {
					avatar: "size-6",
					handle: "text-sm"
				},
				lg: {
					avatar: "size-8",
					handle: "text-base"
				}
			}
		},
		defaultVariants: {
			size: "md"
		}
	});

	export type UserVariants = VariantProps<typeof user>;
</script>

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

	interface Props {
		handle?: string;
		src?: string;
		size?: UserVariants["size"];
		showImage?: boolean;
		showText?: boolean;
		class?: string;
	}

	let {
		handle,
		src,
		size = "md",
		showImage = true,
		showText = true,
		class: className
	}: Props = $props();

	const slots = $derived(user({ size }));
</script>

<span class={`inline-flex items-center gap-2 ${className ?? ""}`}>
	{#if showImage}
		<Avatar {src} {handle} size={slots.avatar()} />
	{/if}
	{#if showText && handle}
		<span class={slots.handle()}>{handle}</span>
	{/if}
</span>
