import React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { TravelMiniCTA } from './index';
import { ArticleBlockContainer } from './styles';
import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';

const ResponsiveWrapper = styled.div`
  max-width: 1168px;
  margin: 0 auto;
  @media (max-width: 1200px) {
    max-width: 976px;
  }

  @media (max-width: 992px) {
    max-width: 720px;
  }

  @media (max-width: 767px) {
    max-width: 100%;
    padding: 24px;
  }
`;

storiesOf('Typescript Component/In Article/Travel Mini CTA', module)
  .add('Travel Mini CTA', () => (
    <ArticleHarness>
      <ArticleBlockContainer>
        <TravelMiniCTA />
      </ArticleBlockContainer>
    </ArticleHarness>
  ))
  .add('Travel Mini CTA - On Channel Page', () => (
    <ResponsiveWrapper>
      <TravelMiniCTA isOnChannelPage={true} />
    </ResponsiveWrapper>
  ));