<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Avatar, { avatarSizeNames } from "./Avatar.svelte";

	// `full` takes its size from the layout, so it has nothing to show in a ramp
	const scale = avatarSizeNames.filter((size) => size !== "full");

	const { Story } = defineMeta({
		title: "UI/Avatar",
		component: Avatar,
		tags: ["autodocs"],
		argTypes: {
			did: { control: "text" },
			src: { control: "text" },
			handle: { control: "text" },
			size: { control: "select", options: avatarSizeNames }
		},
		args: {
			handle: "user.tld"
		}
	});
</script>

<Story name="Fallback" />
<Story name="From a did" args={{ did: "did:plc:3p7ejjxnufohsygt5vbyxb2i" }} />
<Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
<Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />

<Story name="Sizes" asChild>
	<div class="flex items-end gap-3">
		{#each scale as size (size)}
			<div class="flex flex-col items-center gap-1">
				<Avatar handle="user.tld" {size} />
				<span class="typography-paragraph-mini text-foreground-muted">{size}</span>
			</div>
		{/each}
	</div>
</Story>
