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

	const { Story } = defineMeta({
		title: "UI/Typography",
		component: Typography,
		tags: ["autodocs"],
		argTypes: {
			variant: {
				control: { type: "select" },
				options: ["h1", "h2", "h3", "h4", "body", "body-strong", "small", "caption", "mono"]
			},
			as: { control: "text" }
		},
		args: {
			variant: "body"
		}
	});
</script>

<!-- Typography content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="H1" args={{ variant: "h1" }}>Design that ships</Story>
<Story name="H2" args={{ variant: "h2" }}>Design that ships</Story>
<Story name="H3" args={{ variant: "h3" }}>Design that ships</Story>
<Story name="H4" args={{ variant: "h4" }}>Design that ships</Story>
<Story name="Body" args={{ variant: "body" }}>
	Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol.
</Story>
<Story name="BodyStrong" args={{ variant: "body-strong" }}>
	Tangled is a social-enabled, decentralized code collaboration platform.
</Story>
<Story name="Small" args={{ variant: "small" }}>Last updated 2 hours ago.</Story>
<Story name="Caption" args={{ variant: "caption" }}>Caption text for supporting detail.</Story>
<Story name="Mono" args={{ variant: "mono" }}>const tangled = true;</Story>
<Story name="CustomTag" args={{ variant: "h2", as: "div" }}>
	Renders as a div while keeping h2 styling
</Story>

<Story name="Scale">
	<div class="flex flex-col gap-3">
		<Typography variant="h1">Heading 1</Typography>
		<Typography variant="h2">Heading 2</Typography>
		<Typography variant="h3">Heading 3</Typography>
		<Typography variant="h4">Heading 4</Typography>
		<Typography variant="body">Body paragraph text.</Typography>
		<Typography variant="body-strong">Body strong paragraph text.</Typography>
		<Typography variant="small">Small supporting text.</Typography>
		<Typography variant="caption">Caption text.</Typography>
		<Typography variant="mono">const scale = "type";</Typography>
	</div>
</Story>
