import React from 'react'
import PropTypes from 'prop-types';

import { Padder } from './Padder'
import { Box } from './Box';
import { Banner } from './Banner'

import '../styles/card.css'

export const Card = ({ children, title, text, width, height, image, imageHeight, direction, parallax }) => {

    const boxWidth = width ? width : '100%'
    const boxHeight = height ? height : 'inherit'
    return (
        <div className='card' style={{ width: boxWidth, minHeight: boxHeight }}>

            {image &&
                <Banner
                    height={imageHeight || 100}
                    source={image}
                    direction={direction}
                    parallax={parallax}
                    roundings={['lefttop', 'righttop']}
                />
            }

            <Padder top="1.5em" bottom="1.5em" left="2em" right="2em">
                <h4 style={{ marginBottom: '0.5em' }}>{title}</h4>
                {text && <p>{text}</p>}
                {children}
            </Padder>
        </div>
    );
}

Card.propTypes = {
    title: PropTypes.string,
    width: PropTypes.number,
    height: PropTypes.number
};