<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
	import FollowCard from "./FollowCard.svelte";
	import type { PersonData } from "./types";

	const person: PersonData = {
		did: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
		handle: "joshka.net",
		description: "Rust, TUIs, and the occasional git plumbing yak-shave.",
		followers: 128,
		following: 87,
		viewerFollowRkey: null,
		isSelf: true
	};

	const { Story } = defineMeta({
		title: "Profile/FollowCard",
		component: FollowCard,
		tags: ["autodocs"],
		argTypes: {
			border: { control: "boolean" },
			shadow: { control: "boolean" },
			background: { control: "boolean" }
		},
		args: {
			person,
			border: false,
			shadow: false,
			background: false
		}
	});
</script>

<!-- default: layout-only (plain), as used on the timeline -->
<Story name="Plain (timeline)" />
<Story name="Bordered" args={{ border: true, background: true }} />

<Story name="With follow button">
	{#snippet template(args)}
		<MockAuthProvider>
			<FollowCard {...args} person={{ ...person, isSelf: false }} border background />
		</MockAuthProvider>
	{/snippet}
</Story>
