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

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

	export type UserVariants = VariantProps<typeof user>;

	// the avatar names its own size rather than taking a class through a slot, so
	// that it can pick the image width it needs. header and large share a rung
	// because in Figma they differ only in the text style beside the circle.
	const avatarSize = {
		header: "large",
		large: "large",
		regular: "regular",
		small: "small",
		mini: "mini"
	} satisfies Record<NonNullable<UserVariants["size"]>, AvatarSize>;
</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}
		<Avatar {did} {handle} size={avatarSize[size]} class={avatarClass} />
	{/if}
	{#if showText && handle}
		<span class={slots.handle({ class: handleClass })}>{handle}</span>
	{/if}
</span>
