import { addParameters } from '@storybook/react';
import React from 'react';

import { withKnobs, text } from '@storybook/addon-knobs';
import { Box, SmartImage } from '../../src';
import { ItineraryItem } from '../../src/Itinerary';
import { Text } from '../../src/Typography';

import itineraryNotes from './Itinerary.md';

export default {
  title: 'Itinerary',
  component: ItineraryItem,
  decorators: [
    (storyFn) => <Box width={[1, 1, 1 / 2]}>{storyFn()}</Box>,
    withKnobs,
  ],
};

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

export const Item = () => {
  return (
    <ItineraryItem
      title={text('Title', 'Arrival by Flight AV1634')}
      media={
        <SmartImage
          src={text('src', 'turtle.jpeg')}
          alt={text('alt', 'Alternative Text')}
          style={{ width: '100%', objectFit: 'cover' }}
          width={text('Width', '400')}
          height={text('Height', '200')}
        />
      }
    >
      <Text lines={2} textOverflow color="text">
        {text(
          'Content',
          ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa augue, efficitur euismod nisi eget, elementum condimentum leo. Etiam eu    dolor a velit molestie lacinia eu sed lorem. Proin sed sapien eu risu   gravida convallis placerat ut nibh. Praesent eu aliquam arcu. Orci',
        )}
      </Text>
    </ItineraryItem>
  );
};