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

	export const user = tv({
		slots: {
			root: "inline-flex items-center",
			avatar: "",
			handle: "truncate"
		},
		variants: {
			size: {
				header: {
					root: "gap-2",
					avatar: "size-[26px]"
				},
				large: {
					root: "gap-1.5",
					avatar: "size-[26px]"
				},
				regular: {
					root: "gap-1",
					avatar: "size-[21px]"
				},
				small: {
					root: "gap-1",
					avatar: "size-[17px]"
				},
				mini: {
					root: "gap-1",
					avatar: "size-[13px]"
				}
			}
		},
		defaultVariants: {
			size: "regular"
		}
	});

	export type UserVariants = VariantProps<typeof user>;

	const handleVariant = {
		header: "h4",
		large: "large",
		regular: "regular",
		small: "small",
		mini: "mini"
	} as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;
</script>

<script lang="ts">
	import Avatar from "./Avatar.svelte";
	import { typography } from "./Typography.svelte";

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

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

	const slots = $derived(user({ size }));
	const handleClass = $derived(
		typography({
			variant: handleVariant[size ?? "regular"],
			class: slots.handle()
		})
	);
</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()} tiny />
	{/if}
	{#if showText && handle}
		<span class={handleClass}>{handle}</span>
	{/if}
</span>
