import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Text } from 'components/text';
import { Row } from 'components/layout';
import { Space, SpaceVariants } from './index';

export default {
  title: 'App Components/Dashboard/Space',
  component: Space,
} as ComponentMeta<typeof Space>;

const child = <Text variant="title">Plain Space with title</Text>;

const Template: ComponentStory<typeof Space> = () => {
  return <Space width={300} />;
};

export const Interactive = Template.bind({});
Interactive.args = {
  children: child,
};

export const Variants: ComponentStory<typeof Space> = () => {
  return (
    <>
      <Row flexWrap="wrap">
        {[
          { index: 1, variant: 'compact' as SpaceVariants },
          { index: 2, variant: 'full' as SpaceVariants },
          { index: 3, variant: 'compact' as SpaceVariants },
        ].map((item) => (
          <Space m="xs" spaceVariant={item.variant} />
        ))}
      </Row>
    </>
  );
};

Variants.args = {};