import { LoadingBox } from "..";
import { commonProps } from "../../utils/storybook";

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

/**
 The Loading Box that provide abstract visual effect for the loading skeleton.
 */
const meta: Meta<typeof LoadingBox> = {
  title: "LoadingBox",
  component: LoadingBox,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      description: "The variants of the loading box.",
      options: ["blink", "progressive"],
      control: { type: "select" },
      table: {
        type: {
          summary: ["blink", "progressive"].map((variant) => `"${variant}"`).join("|"),
        },
        defaultValue: {
          summary: "blink",
        },
      },
    },
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof LoadingBox>;

export const Default: Story = {
  render: (args) => <LoadingBox {...args} css={{ minWidth: "280px", minHeight: "40px" }} />,
};