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

import { _palette } from '../@styles';
import { Loading } from './index';
import type { LoadingProps } from './index';

export default {
  component: Loading,
  title: 'Loading',
  argTypes: {
    size: {
      options: ['big', 'normal', 'small'],
      control: { type: 'radio' }
    }
  }
} as Meta;

const Template: Story<LoadingProps> = args => <Loading {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  size: 'normal',
  invert: false,
  sx: {
    backgroundColor: _palette.common.white
  }
};

export const Inverted = Template.bind({});
Inverted.args = {
  size: 'normal',
  invert: true,
  sx: {
    backgroundColor: _palette.primary[100]
  }
};