import React from 'react';

import { Label } from '../src';

export default {
  title: 'Label',
  component: Label,
  parameters: {
    layout: 'fullscreen',
    backgrounds: {
      default: 'App',
      values: [{ name: 'App', value: '#F2F4F8' }],
    },
  },
};

const Template = (args) => (
  <>
    <div
      style={{
        display: 'flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
        margin: '10px',
        maxWidth: '150px',
      }}
    >
      <Label {...args} />
    </div>
  </>
);

export const Primary = Template.bind({});
export const Loading = Template.bind({});

Primary.args = {
  type: 'plain',
  children: "I'm Label",
  background: '#CCF2F2',
  color: '#1D1D1B',
};

Loading.args = {
  type: 'plain',
  isLoading: true,
};