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

	export const user = tv({
		slots: {
			root: "inline-flex items-center",
			avatar: "",
			handle: "truncate"
		},
		variants: {
			size: {
				header: {
					root: "gap-2",
					avatar: "size-6.5",
					handle: "typography-heading-4"
				},
				large: {
					root: "gap-1.5",
					avatar: "size-6.5",
					handle: "typography-paragraph-large"
				},
				regular: {
					root: "gap-1",
					avatar: "size-5.25",
					handle: "typography-paragraph-regular"
				},
				small: {
					root: "gap-1",
					avatar: "size-4.25",
					handle: "typography-paragraph-small"
				},
				mini: {
					root: "gap-1",
					avatar: "size-3.25",
					handle: "typography-paragraph-mini"
				}
			}
		},
		defaultVariants: {
			size: "regular"
		}
	});

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

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

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

	let {
		handle,
		did,
		size = "regular",
		showImage = true,
		showText = true,
		class: className,
		avatarClass,
		handleClass
	}: Props = $props();

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

<span class={slots.root({ class: className })}>
	{#if showImage}
		<!-- every variant here is size-8 or under, so the small image always fits -->
		<Avatar {did} {handle} size={slots.avatar({ class: avatarClass })} tiny />
	{/if}
	{#if showText && handle}
		<span class={slots.handle({ class: handleClass })}>{handle}</span>
	{/if}
</span>
