import Button from './Index';
import Space from '../../Layout/Space/Index';
export default {
  title: 'Component/Base/Button',
  tags: ['autodocs'],
  component: Button
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button'
  },
  render: () => {
    return (
      <>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Size</h2>
        <Space>
          <Button size={'sm'}>Small</Button>
          <Button size={'md'}>Medium</Button>
          <Button size={'lg'}>Large</Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Loader</h2>
        <Space>
          <Button size={'sm'} loading={true}>
            Button
          </Button>
          <Button size={'md'} loading={true}>
            Button
          </Button>
          <Button size={'lg'} loading={true}>
            Button
          </Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
          Disabled
        </h2>
        <Space>
          <Button size={'sm'} disabled={true}>
            Button
          </Button>
          <Button size={'md'} disabled={true}>
            Button
          </Button>
          <Button size={'lg'} disabled={true}>
            Button
          </Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
          Loading & Disabled
        </h2>
        <Space>
          <Button size={'sm'} disabled={true} loading={true}>
            Button
          </Button>
          <Button size={'md'} disabled={true} loading={true}>
            Button
          </Button>
          <Button size={'lg'} disabled={true} loading={true}>
            Button
          </Button>
        </Space>
      </>
    );
  }
};

export const Secondary = {
  render: () => {
    return (
      <>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Size</h2>
        <Space>
          <Button size={'sm'} variant="secondary">
            Small
          </Button>
          <Button size={'md'} variant="secondary">
            Medium
          </Button>
          <Button size={'lg'} variant="secondary">
            Large
          </Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Loader</h2>
        <Space>
          <Button size={'sm'} variant="secondary" loading={true}>
            Button
          </Button>
          <Button size={'md'} variant="secondary" loading={true}>
            Button
          </Button>
          <Button size={'lg'} variant="secondary" loading={true}>
            Button
          </Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
          Disabled
        </h2>
        <Space>
          <Button size={'sm'} variant="secondary" disabled={true}>
            Button
          </Button>
          <Button size={'md'} variant="secondary" disabled={true}>
            Button
          </Button>
          <Button size={'lg'} variant="secondary" disabled={true}>
            Button
          </Button>
        </Space>
        <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
          Loading & Disabled
        </h2>
        <Space>
          <Button
            size={'sm'}
            variant="secondary"
            disabled={true}
            loading={true}>
            Button
          </Button>
          <Button
            size={'md'}
            variant="secondary"
            disabled={true}
            loading={true}>
            Button
          </Button>
          <Button
            size={'lg'}
            variant="secondary"
            disabled={true}
            loading={true}>
            Button
          </Button>
        </Space>
      </>
    );
  }
};
