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

	const { Story } = defineMeta({
		title: "UI/Avatar",
		component: Avatar,
		tags: ["autodocs"],
		argTypes: {
			did: { control: "text" },
			src: { control: "text" },
			handle: { control: "text" },
			tiny: { control: "boolean" },
			size: { control: "text" }
		},
		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-center gap-3">
		<Avatar handle="user.tld" size="size-6" />
		<Avatar handle="user.tld" size="size-10" />
		<Avatar handle="user.tld" size="size-16" />
	</div>
</Story>
