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

	const { Story } = defineMeta({
		title: "UI/Pagination",
		component: Pagination,
		tags: ["autodocs"],
		argTypes: {
			page: { control: { type: "number" } },
			total: { control: { type: "number" } },
			siblings: { control: { type: "number" } },
			boundaries: { control: { type: "number" } },
			labels: { control: { type: "boolean" } },
			disabled: { control: { type: "boolean" } }
		},
		args: {
			page: 1,
			total: 10
		}
	});
</script>

<Story name="FirstPage" args={{ page: 1, total: 10 }} />
<Story name="MiddlePage" args={{ page: 5, total: 10 }} />
<Story name="LastPage" args={{ page: 10, total: 10 }} />
<Story name="FewPages" args={{ page: 2, total: 3 }} />
<Story name="SinglePage" args={{ page: 1, total: 1 }} />
<Story name="ManyPages" args={{ page: 12, total: 40 }} />
<Story name="WithLabels" args={{ page: 5, total: 10, labels: true }} />
<Story name="Disabled" args={{ page: 5, total: 10, disabled: true }} />

<!-- slots are sized from `total`, so a four-digit range keeps one width across the
     whole row instead of widening as the current page gains a digit -->
<Story name="FourDigitRange" args={{ page: 1234, total: 5000 }} />
<Story name="WideWindow" args={{ page: 20, total: 40, siblings: 2, boundaries: 2 }} />
<Story name="NarrowWindow" args={{ page: 20, total: 40, siblings: 0 }} />
