import React from 'react';

import { Card } from '../components/Card'

import gradient from './assets/Amin.jpg'


export default {
    title: 'Design System/Card',
    component: Card
};

const Template = (args) => <div style={{ height: 1000 }}><Card {...args} /></div>;

export const Standard = Template.bind({});
Standard.args = {
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 200
};

export const TitleOnly = Template.bind({});
TitleOnly.args = {
    title: 'Card',
    width: 300,
    height: 200
};


export const Image = Template.bind({});
Image.args = {
    image: gradient,
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 200
};

export const CustomImageHeight = Template.bind({});
CustomImageHeight.args = {
    image: gradient,
    imageHeight: 150,
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 200
};

export const MoreHeight = Template.bind({});
MoreHeight.args = {
    image: gradient,
    imageHeight: 150,
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 350
};

export const Parallax = Template.bind({});
Parallax.args = {
    image: gradient,
    imageHeight: 150,
    parallax: true,
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 300
};

export const CustomImageDirection = Template.bind({});
CustomImageDirection.args = {
    image: gradient,
    imageHeight: 150,
    direction: 'center',
    title: 'Card',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    width: 300,
    height: 300
};

export const WithChildren = Template.bind({});
WithChildren.args = {
    title: 'Health',
    width: 300,
    children: <h1 style={{color: '#DCDCDC'}}>1.16</h1>
};