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

import { ASSETS_URL } from '../../consts/common';
import { TextWithIcon, TextWithIconProps } from './text-with-icon';

export default {
  component: TextWithIcon,
  title: 'Tags and Indicators/OS Types',
  argTypes: {
    src: {
      description: 'The src of the icon.'
    },
    text: {
      description: 'Test to display.'
    },
    classes: {
      description: 'Override classes.'
    },
    truncateText: {
      description: 'Flag for truncating the text.'
    },
    width: {
      description: 'Width of the Box.'
    }
  }
} as Meta;

const Template: Story<TextWithIconProps> = args => <TextWithIcon {...args} />;

export const Windows = Template.bind({});
Windows.args = {
  src: `${ASSETS_URL}/icons/icon_windows.svg`,
  text: 'Windows'
};

export const Linux = Template.bind({});
Linux.args = {
  src: `${ASSETS_URL}/icons/icon_linux.svg`,
  text: 'Linux'
};

export const IOS = Template.bind({});
IOS.args = {
  src: `${ASSETS_URL}/icons/icon_IOS.svg`,
  text: 'IOS'
};

export const Android = Template.bind({});
Android.args = {
  src: `${ASSETS_URL}/icons/icon_android.svg`,
  text: 'Android'
};

export const MacOS = Template.bind({});
MacOS.args = {
  src: `${ASSETS_URL}/icons/icon_IOS.svg`,
  text: 'MacOS'
};