import { Paper, Skeleton } from "@mantine/core";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { LoadingSkeleton } from "./LoadingSkeleton";

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

export default meta;
type Story = StoryObj<typeof meta>;
export const Initial: Story = { name: "Загрузка области" };