import { addParameters } from '@storybook/react';
import React from 'react';
import { withKnobs, text } from '@storybook/addon-knobs';
import { ThemeProvider } from '../../src/styles';

import { SmartImage, Image } from '../../src';
import smartImageNotes from './Image.md';

export default {
  title: 'Image',
  component: SmartImage,
  decorators: [withKnobs],
  propTablesExclude: [ThemeProvider],
};

addParameters({ info: { text: smartImageNotes } });

export const smart = () => {
  return (
    <SmartImage
      src={text('src', 'turtle.jpeg')}
      alt={text('alt', 'Alternative Text')}
      width={text('Width', '300')}
      height={text('Height', '500')}
    />
  );
};

export const normal = () => {
  return (
    <Image
      src={text('src', 'https://media.venturatravel.org/unsafe/turtle.jpeg')}
      alt={text('alt', 'Alternative Text')}
      width={text('Width', '300px')}
      height={text('Height', '500px')}
    />
  );
};