import type { Meta, StoryObj } from "@storybook/react-vite";

import { Paper, Skeleton } from "@mantine/core";

import { LoadingSkeleton } from "./LoadingSkeleton";

const meta = {
	args: { label: "Загрузка содержимого" },
	argTypes: {
		children: { table: { disable: true } },
		label: { control: "text" },
	},
	component: LoadingSkeleton,
	parameters: {
		docs: {
			description: {
				component:
					"Общая status/busy область для initial или partial loading. Передайте доступную метку и только декоративные Skeleton shapes без интерактивных элементов. Геометрию определяет владелец section/page (см. Product/AccountPageLoading). При refetch сохраняйте уже видимые данные; для действия используйте Button loading. Этот пример не запускает запрос и не демонстрирует query lifecycle.",
			},
		},
	},
	render: arguments_ => (
		<Paper p="md" withBorder>
			<LoadingSkeleton {...arguments_}>
				<Skeleton h={24} w="60%" />

				<Skeleton h={72} />

				<Skeleton h={16} w="80%" />
			</LoadingSkeleton>
		</Paper>
	),
	tags: ["autodocs"],
	title: "Design System/Components/LoadingSkeleton",
} satisfies Meta<typeof LoadingSkeleton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Initial: Story = { name: "Загрузка области" };