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

import Loader, { LoaderProps } from "./Loader";
import Block from "../Block/Block";
import Button from "../Button/Button";

export default {
  title: "Component/Atoms/Loader",
  component: Loader,
  parameters: {
    component: Loader,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<LoaderProps> = (args) => (
  <Block className="h-[200px]">
    <Loader {...args}></Loader>
  </Block>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const StyledLoader = Example.bind({});
StyledLoader.args = {
  children: (
    <Loader
      classes={{ root: "bg-indigo-A700 text-white", svg: "text-yellow-A700" }}
      message="Loading data ..."
    />
  ),
  classes: "w-full h-[640px]",
};

export const InlineLoader = Example.bind({});
InlineLoader.args = {
  children: (
    <Button variation="primary">
      <Loader isInline={true} />
      <span className="pl-4">Loading...</span>
    </Button>
  ),
  classes: "w-full",
};
