import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import { RPGUIRoot } from '../../..';
import { Divider } from '../../../components/shared/Divider/Divider';

export default {
  title: 'UI/Divider',
  component: Divider,
  parameters: {
    layout: 'centered',
  },
} as ComponentMeta<typeof Divider>;

const Template: ComponentStory<typeof Divider> = args => (
  <RPGUIRoot>
    <div style={{ width: '300px', padding: '20px', background: '#333' }}>
      <div>Content Above</div>
      <Divider {...args} />
      <div>Content Below</div>
    </div>
  </RPGUIRoot>
);

export const Default: ComponentStory<typeof Divider> = Template.bind({});
Default.args = {};

export const CustomMargin: ComponentStory<typeof Divider> = Template.bind({});
CustomMargin.args = {
  margin: '16px 0',
};
