<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: [
					"h0",
					"h1",
					"h2",
					"h3",
					"h4",
					"large",
					"regular",
					"small",
					"mini",
					"mono-large",
					"mono",
					"mono-small"
				]
			},
			weight: {
				control: { type: "select" },
				options: ["regular", "semibold", "bold"]
			},
			as: { control: "text" }
		},
		args: {
			variant: "regular",
			weight: "regular"
		}
	});

	const paragraphSizes = ["large", "regular", "small", "mini"] as const;
	const weights = ["regular", "semibold", "bold"] as const;
</script>

<!-- Typography content comes through its `children` snippet, provided here as Story slot content. -->
<Story name="H0" args={{ variant: "h0" }}>Design that ships</Story>
<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="Paragraph" args={{ variant: "regular" }}>
	Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol.
</Story>
<Story name="ParagraphBold" args={{ variant: "regular", weight: "bold" }}>
	Tangled is a social-enabled, decentralized code collaboration platform.
</Story>
<Story name="Small" args={{ variant: "small" }}>Last updated 2 hours ago.</Story>
<Story name="Mini" args={{ variant: "mini" }}>Mini 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>

<!-- Mirrors the Figma "Font Styles" specimen (node 1:186). -->
<Story name="Scale">
	<div class="flex flex-col gap-12">
		<div class="flex flex-col gap-3">
			<Typography variant="h0">Heading 0</Typography>
			<Typography variant="h1">Heading 1</Typography>
			<Typography variant="h2">Heading 2</Typography>
			<Typography variant="h3">Heading 3</Typography>
			<Typography variant="h4">Heading 4</Typography>
		</div>
		<div class="flex flex-col gap-3">
			{#each paragraphSizes as size (size)}
				{#each weights as weight (weight)}
					<Typography variant={size} {weight}>
						Paragraph {size} / {weight}
					</Typography>
				{/each}
			{/each}
		</div>
		<div class="flex flex-col gap-3">
			<Typography variant="mono-large">Monospace Large</Typography>
			<Typography variant="mono">Monospace Regular</Typography>
			<Typography variant="mono-small">Monospace Small</Typography>
		</div>
	</div>
</Story>
