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

export const Default = {
  args: {
    primary: true,
    label: 'Button',
  },
  render: () => {
    return (
      <>
        <h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Size</h2>
        <Space>
          <Button size={"sm"}>Button - SM</Button>
          <Button size={"md"}>Button - MD</Button>
          <Button size={"lg"}>Button - LG</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>
      </>
    )
  }
};