import Icon from '.';

export default {
  title: 'Deprecated/Icon',

  parameters: {
    readme: {
      sidebar: '<!-- PROPS -->',
    },
  },
};

export function WithDifferentNames() {
  return (
    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
      <Icon name="box" variant="solid" />
      <Icon name="cut" />
      <Icon name="copy" />
      <Icon name="file" />
    </div>
  );
}

WithDifferentNames.storyName = 'with different names';

export function WithDifferentSizes() {
  return (
    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
      <Icon name="box" variant="solid" />
      <Icon name="box" size={50} variant="solid" />
    </div>
  );
}

WithDifferentSizes.storyName = 'with different sizes';

export function WithRounded() {
  return (
    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
      <Icon name="box" rounded variant="solid" />
    </div>
  );
}

WithRounded.storyName = 'with rounded';
