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

	const { Story } = defineMeta({
		title: "UI/User",
		component: User,
		tags: ["autodocs"],
		argTypes: {
			handle: { control: "text" },
			src: { control: "text" },
			size: {
				control: { type: "inline-radio" },
				options: ["header", "large", "regular", "small", "mini"]
			},
			showImage: { control: "boolean" },
			showText: { control: "boolean" }
		},
		args: {
			handle: "user.tld",
			size: "regular",
			showImage: true,
			showText: true
		}
	});
</script>

<Story name="Default" />
<Story name="With avatar" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
<Story name="Image only" args={{ showText: false }} />
<Story name="Text only" args={{ showImage: false }} />

<Story name="Sizes">
	<div class="flex flex-col items-start gap-3">
		<User size="header" />
		<User size="large" />
		<User size="regular" />
		<User size="small" />
		<User size="mini" />
	</div>
</Story>
