import type { Story, Meta } from '@storybook/react';

import { makeStyles } from '../../@styles/make-styles';
import { Divider } from './index';
import type { DividerProps } from './index';

export default {
  title: 'Layout/Dividers',
  argTypes: {
    orientation: {
      description: 'The component orientation.',
      options: ['horizontal', 'vertical'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'horizontal'
      }
    }
  }
} as Meta;

const createClasses = makeStyles(() => ({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh'
  }
}));

const Template: Story<DividerProps> = args => {
  const classes = createClasses();
  return (
    <div className={classes.container}>
      <Divider {...args} />
    </div>
  );
};

export const Horizontal = Template.bind({});
Horizontal.args = {
  style: {
    width: '100%'
  }
};

export const Vertical = Template.bind({});
Vertical.args = {
  orientation: 'vertical'
};