import React from 'react';
import styled from 'styled-components';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { theme } from '@nuvolo/nuux-theme';
import { NuvoDividerLine } from '..';

export default {
  title: 'nuux-core/components/NuvoDividerLine',
  component: NuvoDividerLine,
} as ComponentMeta<typeof NuvoDividerLine>;

const MyBlockItem = styled.div`
  color: ${theme.color((c) => c.accent.middle)};
  text-align: center;
`;

const Template: ComponentStory<typeof NuvoDividerLine> = (args) => (
  <>
    <MyBlockItem>Item #1</MyBlockItem>
    <NuvoDividerLine {...args} />
    <MyBlockItem>Item #2</MyBlockItem>
  </>
);

export const HorizontalPrimary = Template.bind({});
HorizontalPrimary.storyName = 'Horizontal Primary';
HorizontalPrimary.args = {
  type: 'primary',
  vertical: false,
};

export const HorizontalSecondary = Template.bind({});
HorizontalSecondary.storyName = 'Horizontal Secondary';
HorizontalSecondary.args = {
  type: 'secondary',
  vertical: false,
};

export const HorizontalEqualSpacing = Template.bind({});
HorizontalEqualSpacing.storyName = 'Horizontal with Equal Spacing';
HorizontalEqualSpacing.args = {
  type: 'primary',
  vertical: false,
  spacing: '1em',
};

export const HorizontalSpacings = Template.bind({});
HorizontalSpacings.storyName = 'Horizontal with Spacings';
HorizontalSpacings.args = {
  type: 'primary',
  vertical: false,
  spacingBefore: '10px',
  spacingAfter: '20px',
};