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

export default {
  title: 'Design System/Divider',
  component: Divider,
  argTypes: {
    colorVariant: {
      options: ['divider', 'divider-01'],
      control: { type: 'select' },
    },
    directionVariant: {
      options: ['horizontal', 'vertical'],
      control: { type: 'select' },
    },
    backgroundColor: {
      options: ['success', 'secondary', 'white'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Divider>;

export const Interactive: ComponentStory<typeof Divider> = (args) => {
  return (
    <>
      <Row alignItems="center">
        <Divider {...args} directionVariant="horizontal" />
        <Divider {...args} />
      </Row>
      <Row alignItems="center" my="xs">
        <Text variant="body">Left</Text>
        <Divider mx="s" {...args} directionVariant="vertical" />
        <Divider {...args} directionVariant="horizontal" />
        <Divider mx="s" {...args} />
        <Divider {...args} />
        <Text ml="xs" variant="body">
          Right
        </Text>
      </Row>
      <Divider {...args} directionVariant="horizontal" />
    </>
  );
};

Interactive.args = {
  colorVariant: 'divider',
  size: 1,
  directionVariant: 'horizontal',
  backgroundColor: 'divider',
};