import { componentName } from '../src/components/descope-totp-image';
import { customHeightControl, customWidthControl } from './commonControls';

const Template = ({ 'st-width': customWidth, 'st-height': customHeight }) => `
  <descope-totp-image
    st-height="${customHeight || ''}"
    st-width="${customWidth || ''}"
  ></descope-totp-image>
`;

export default {
  component: componentName,
  title: 'descope-totp-image',
  parameters: {
    panelPosition: 'right',
    controls: { expanded: true },
  },
  argTypes: {
    ...customHeightControl,
    ...customWidthControl,
  },
};

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

Default.args = {
  'st-width': '',
  'st-height': '',
};
