import { componentName } from '../src/components/descope-divider';
import { directionControl, modeControl, typographyVariantControl } from './commonControls';

const Template = ({ variant, uppercase, mode, text, vertical, italic, direction }) => `
  <descope-divider
    variant="${variant || ''}"
    mode="${mode || ''}"
    uppercase="${uppercase || ''}"
    vertical="${vertical || ''}"
    italic="${italic || ''}"
    st-host-direction="${direction ?? ''}"
  >${text || ''}</descope-divider
`;

export default {
  component: componentName,
  title: 'descope-divider',
  argTypes: {
    ...modeControl,
    ...typographyVariantControl,
    ...directionControl,
    uppercase: {
      name: 'Uppercase',
      control: { type: 'boolean' },
    },
    vertical: {
      name: 'Vertical',
      control: { type: 'boolean' },
    },
    italic: {
      name: 'Italic',
      control: { type: 'boolean' },
    },
    text: {
      name: 'Text',
      control: { type: 'text' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {};
