import React from 'react';
import Card from './index';
import ActionedLink from '../actioned-link/actioned-link';

export default {
  title: 'common/Card',
  component: Card,
  args: {
    showImage: true,
    showSubHeadline: true,
    showHeadline: true,
    showDescription: true,
    showLink: true,
    showAction: true,
    tagline: 'Subscriber only',
  },
};

const url =
  'https://myaccount.economist.com/file-asset-public/Climate_issue?oid=00D3z000002JvyiEAC';

export const card = args => (
  <div style={{ maxWidth: '300px' }}>
    <Card {...args}>
      {args.showImage && <Card.Image imgUrl={url} />}
      <Card.Content>
        {args.showSubHeadline && (
          <Card.SubHeadline as='h2' tagline={args.tagline}>
            Weekly on Sunday
          </Card.SubHeadline>
        )}
        {args.showHeadline && <Card.Headline>Money talks</Card.Headline>}
        {args.showDescription && (
          <Card.Description>
            The best of our climate-change analysis from <em>The Economist</em>
          </Card.Description>
        )}
        {args.showLink && <Card.Link href='#'>Preview</Card.Link>}
        {args.showAction && (
          <Card.Action>
            <ActionedLink href='/' text='Sign up' icon='add' />
          </Card.Action>
        )}
      </Card.Content>
    </Card>
  </div>
);
