import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Flex } from "../ui/flex";
import mdx from "./Loading.mdx";
import { Loading } from "../ui/loading";

export default {
  title: "Components/Loading",
  component: Loading,
} as Meta<typeof Loading>;

const Template: StoryFn<typeof Loading> = ({ color }) => {
  return (
    <Flex className="gap-4">
      <Loading size={24} color={color} />
      <Loading size={48} color={color} />
      <Loading size={64} color={color} />
    </Flex>
  );
};

export const Multiple = Template.bind({});
Multiple.args = {
  color: "red",
};

export const Playground: StoryFn<typeof Loading> = (args) => (
  <Loading {...args} />
);
Playground.storyName = "Loading";
Playground.argTypes = {
  size: { control: { type: "number" }, defaultValue: 24 },
  color: { defaultValue: "blue" },
};